10

配列値を 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>
4

2 に答える 2