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']
        })
      }

在标记中，由于出现错误，我无法正确显示表格：

错误错误：在_throwError（shared.ts：140）处找不到名称为“ items”的控件...

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

    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

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

1 个答案: