无法使用表单组中的嵌套表单数组正确显示表单

Question

我有一个表单组 -> 表单组 -> 表单数组：

      ngOnInit() {
        this.form = this.fb.group({
          dropDownOptions: this.fb.group({
            items: this.fb.array([this.createItem()])
          })
        })
      }

      createItem() {
        return this.fb.group({
          name: ['Jon'],
          surname: ['Doe']
        })
      }

在标记中我无法正确显示表格，因为我收到错误：

ERROR Error: Cannot find control with name: 'items' at _throwError (shared.ts:140)...

我以为我可以使用以下方法轻松获取数据：

    get dropDownOptions(): FormArray {
       return (this.form.controls['dropDownOptions'] as FormArray).controls['items']
     }

然后在我的html中使用这个：

      <form [formGroup]="form" (ngSubmit)="submit()">
      <div formArrayName="items"
        *ngFor="let item of dropDownOptions.controls; let i = index">
        <div [formGroupName]="i">
          <input formControlName='name'>
          <input formControlName='surname'>
        </div>
      </div>

我似乎无法修复它或获得正确的组合来正确显示表单数组项！

有什么想法吗？

这是一个Stackblitz

Answer 1

由于您在另一个 formGroup 中创建了 formGroup，因此您需要使用 formGroupName 指令

试试这个：

<form [formGroup]="form" (ngSubmit)="submit()">
 <ng-container formGroupName="dropDownOptions">
    <div formArrayName="items"
    *ngFor="let item of dropDownOptions.controls; let i = index">
    <div [formGroupName]="i">
      <input formControlName='name'>
      <input formControlName='surname'>
    </div>
  </div>
 </ng-container>

  <button type="button" (click)="addNext()">Add Next</button>
  <button type="submit">Submit (look at console)</button>
</form>

分叉示例：https://stackblitz.com/edit/angular-rsqgkg

无法使用表单组中的嵌套表单数组正确显示表单

Unable to display form corrrectly with nested form array in a form group

angular

angular-reactive-forms