argos/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html

<div [id]="compositeField.id" [formGroup]="form">

    <div *ngIf="compositeField.fields.length == 1" class="fieldset-component">
        <h5 *ngIf="compositeField.title" style="font-weight:bold; color: #3a3737;">{{compositeField.title}}</h5>
        <div class="content-left-margin">
            <h5 *ngIf="compositeField.description">{{compositeField.description}}</h5>
            <h5 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
                <i>{{compositeField.extendedDescription}}</i>
            </h5>
            <df-field *ngIf="compositeField.fields.length == 1" [field]="compositeField.fields[0]" [form]="form.get('fields').get(''+0)"
                [pathName]="pathName+'.fields.'+0"></df-field>
        </div>
    </div>


    <div *ngIf="compositeField.fields.length > 1" class="fieldset-component">
        <h5 *ngIf="compositeField.title" style="font-weight:bold; color: #3a3737;">{{compositeField.title}}</h5>
        <div class="content-left-margin">
            <h5 *ngIf="compositeField.description">{{compositeField.description}}</h5>
            <h5 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
                <i>{{compositeField.extendedDescription}}</i>
            </h5>
            <div *ngFor="let field of compositeField.fields; let i = index;">
                <div *ngIf="visibilityRulesService.isElementVisible(null,field.id)">
                    <div *ngIf="(field?.multiplicity?.max - 1) > (field?.multiplicityItems?.length)">
                        <a (click)="addMultipleField(i)" style="cursor: pointer">
                            Add one more field +
                        </a>
                    </div>
                </div>

                <df-field [field]="field" [form]="form.get('fields').get(''+i)" [pathName]="pathName+'.fields.'+i"></df-field>
                <div *ngFor="let multipleField of field.multiplicityItems; let j = index;">
                    <df-field [field]="multipleField" [form]="form.get('fields').get(''+i).get('multiplicityItems').get(''+j)" [pathName]="pathName+'.fields.'+i+'.multiplicityItems.'+j"></df-field>
                </div>
            </div>
        </div>
    </div>
</div>