Fixes styling issue in multi field set - (Issue #156)

This commit is contained in:
apapachristou 2019-09-18 14:35:51 +03:00
parent 26f27f3d6d
commit e50875c988
2 changed files with 18 additions and 4 deletions

View File

@ -14,14 +14,22 @@
<!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" --> <!-- *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value)" -->
<div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldFormGroup)"> <div class="row" *ngIf="this.visibilityRulesService.checkElementVisibility(compositeFieldFormGroup.get('id').value) && this.visibilityRulesService.scanIfChildsOfCompositeFieldHasVisibleItems(compositeFieldFormGroup)">
<div class="col-12">
<app-form-composite-field class="align-self-center col-12" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId" <div class="row">
<app-form-composite-field class="align-self-center col" [form]="compositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
[isChild]="false"></app-form-composite-field> [isChild]="false"></app-form-composite-field>
<div *ngIf="(compositeFieldFormGroup.get('multiplicityItems').length) > 0" class="col-auto align-self-center mt-auto pb-2">
<button mat-icon-button type="button" class="deleteBtn" (click)="deleteCompositeFieldFormGroup(i);">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<div *ngIf="compositeFieldFormGroup" class="col-12"> <div *ngIf="compositeFieldFormGroup" class="col-12">
<div class="row"> <div class="row">
<div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index"> <div class="col-12" *ngFor="let multipleCompositeFieldFormGroup of compositeFieldFormGroup.get('multiplicityItems')['controls']; let j = index">
<div class="styleBorder row"> <div class="row">
<app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId" <app-form-composite-field class=" align-self-center col" [form]="multipleCompositeFieldFormGroup" [datasetProfileId]="datasetProfileId"
[isChild]="true"></app-form-composite-field> [isChild]="true"></app-form-composite-field>
<div class="col-auto align-self-center"> <div class="col-auto align-self-center">

View File

@ -39,6 +39,12 @@ export class FormSectionComponent implements OnInit {
(<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems'))).push(compositeField.buildForm()); (<FormArray>(this.form.get('compositeFields').get('' + fieldsetIndex).get('multiplicityItems'))).push(compositeField.buildForm());
} }
deleteCompositeFieldFormGroup(compositeFildIndex: number) {
const firstMultiplicityItem = this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems').get('' + 0).get('fields').get('' + 0).value;
this.form.get('compositeFields').get('' + compositeFildIndex).get('fields').get('' + 0).patchValue(firstMultiplicityItem);
(<FormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(0);
}
deleteMultipeFieldFromCompositeFormGroup(compositeFildIndex: number, fildIndex: number) { deleteMultipeFieldFromCompositeFormGroup(compositeFildIndex: number, fildIndex: number) {
(<FormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(fildIndex); (<FormArray>(this.form.get('compositeFields').get('' + compositeFildIndex).get('multiplicityItems'))).removeAt(fildIndex);
} }