配列値を formBuilder.array に設定することに問題があります。配列ではないformBuilderでは、この方法でsetValueを使用できますが、formBuilder.arrayではできません。formbuilder の 'listServiceFeature' と 'listservicefeature' に値を設定しようとしましたが、どちらの方法でも値が設定されません。
TS
listServiceFeature: any = ['m1', 'm2']
contentFormValidate(): void {
this.contentForm = this.formBuilder.group({
'listservicefeature': this.formBuilder.array([
this.formBuilder.group({
listServiceFeature: ['', [Validators.required]
});
]),
});
this.contentForm.controls['listservicefeature'].setValue(this.listServiceFeature);
}
addServiceFeature() {
const control = <FormArray>this.contentForm.controls['listservicefeature'];
control.push(this.initServiceFeature());
}
removeServiceFeature(i: number) {
const control = <FormArray>this.contentForm.controls['listservicefeature'];
control.removeAt(i);
}
html
<div formArrayName="listservicefeature">
<div class="form-group" *ngFor="let servicefeature of contentForm.controls.listservicefeature.controls; let i=index">
<label for="Service">Features {{i+1}}</label>
<div class="input-group" [formGroupName]="i">
<input type="text" class="form-control" formControlName="listServiceFeature">
<template [ngIf]="i == 0">
<span class="input-group-btn">
<button (click)="addServiceFeature()" class="btn btn-default" type="button">
<span class="lnr lnr-plus-circle icon-orange-gable-buttom"></span>
</button>
</span>
</template>
<template [ngIf]="i > 0">
<span class="input-group-btn">
<button (click)="removeServiceFeature(i)" class="btn btn-default" type="button">
<span class="lnr lnr-trash icon-orange-gable-buttom"></span>
</button>
</span>
</template>
</div>
</div>
</div>