角度反应形式：FormArray 内未命名的 FormArray答案

【问题标题】：Angular reactive forms: unnamed FormArray inside FormArray角度反应形式：FormArray 内未命名的 FormArray
【发布时间】：2021-06-29 17:03:32
【问题描述】：

我对如何为我的数据类型显示正确的输入表感到困惑（或者我构造 FromGroup 的方式是否有效），所以我在这里是我的组件

export class FoiFormComponent {

  listForm = new FormGroup({

    fois: new FormArray([

      new FormArray([
        new FormControl('01-01-2021'),
        new FormControl('101'),
        new FormControl('201')]),

      new FormArray([
        new FormControl('02-01-2021'),
        new FormControl('102'),
        new FormControl('202')])

    ])
  });

  constructor() {}

  getFois(): FormArray[] {
    return (this.listForm.get('fois') as FormArray).controls as FormArray[];
  }

}

我想要的结果应该是这样的

我试过这样做

  <table>
    <tr *ngFor="let foiArr of getFois; index as i" [formGroupName]="i">
      <td *ngFor="let row of foiArr.controls[i].controls; index as j">
        <input formControlName="j">
      </td>
    </tr>
  </table>

但我得到的错误是“NgFor 仅支持绑定到可迭代对象，例如数组。” （即使它是数组，在代码中我也可以这样做console.log(this.getFois()[0]);

注意：所以表格在列和行中都是动态的，这就是为什么我没有为每个数组或 formGroups 命名的原因。非常感谢任何帮助或提示。

【问题讨论】：

标签： angular angular-reactive-forms formarray

【解决方案1】：

如果有人感兴趣，我可以通过使用索引作为 FormArrayName 来做到这一点：

<form [formGroup]="fois">

  <table>
    <ng-container *ngFor="let control of getFoiControls(); let i = index">
      <tr [formArrayName]="i">
        <td *ngFor="let row of getDay('' + i).controls; let j = index">
          <input [formControlName]="j">
        </td>
      </tr>
    </ng-container>

  </table>

</form>

在组件中：

fois = new FormGroup({});

  constructor() {}

  getDay(day: string): FormArray {
    return this.fois.get(day) as FormArray;
  }

  getFoiControls(): string[]{
    return Object.keys(this.fois.controls);
  }

  ngOnInit(): void {

    this.fois.addControl('0', new FormArray([
      new FormControl('01-01-2021'),
      new FormControl('101'),
      new FormControl('201')
    ]));
    this.fois.addControl('1', new FormArray([
      new FormControl('02-01-2021'),
      new FormControl('102'),
      new FormControl('202')
    ]));
    this.fois.addControl('2', new FormArray([
      new FormControl('02-01-2021'),
      new FormControl('103'),
      new FormControl('203')
    ]));

  }

【讨论】：