无法将嵌套表单组绑定到反应表单中的表单数组？

Question

https://stackblitz.com/edit/angular-reactive-forms-eg-s1v5zs?file=src/app/app.component.html

无法将 {form control} 绑定到数据 [ { “组1”：“”， “组2”：{ “数据”： ”” } } ]

需要使用表单控件名称进行绑定

 <form [formGroup]="formGroup">
    <div formArrayName="features">
        <div class="row no-gutters form-group" *ngFor="let feature of features.controls; let i = index; let last = last"
            [formGroupName]="i">
            Grp:1 <input
        type="text"
        class="form-control px-2 col"
        formControlName="group1"
        title="feature"
        >
            <!-- //How to bind  value of data in html??? -->
            <div [formGroup]="group2">
                <input type="text"
                class="form-control px-2 col"
                formControlName="group2"
                title="feature"
                >
            </div>
            <button class="col btn btn-success" (click)="addFeature()">
                +
                </button>
        </div>
    </div>
    <pre>
    {{ features.value|json}}
  </pre>
</form>

typeScript
  constructor(private fb: FormBuilder) {
    this.addFeature();
  }
  formGroup = this.fb.group({
    features: this.fb.array([])
  });
  get features(): FormArray {
    return this.formGroup.get("features") as FormArray;
  }
  addFeature(): void {
    let data = this.fb.group({
      group1: new FormControl("grp_1"),
      group2: this.fb.group({
        data: new FormControl("grp_2")
      })
    });
    this.features.push(data);
  }`enter code here`

Answer 1

您的文字<input> 上有formControlName="group2"。相反，您应该将group2 表单组的data 控件绑定到输入：formControlName="data"。

Answer 2

如果你想用对象数组创建嵌套表单，那么你应该使用 FormGrop。

试试这个：

addFeature(): void {
    let data = this.fb.group({
      group1: new FormControl("grp_1"),
      group2: this.fb.group({
        data: new FormControl("grp_2")
      }),
      group3: this.fb.array([
        this.fb.group({
          data: new FormControl("grp_3")
        })
      ])
    });
    this.features.push(data);
  }

Forked Example