Angular reactive forms: unnamed FormArray inside FormArray

Question

I'm confused about how to display a proper input table for my type of data (or is the way I construct FromGroup even valid), so I here is my component

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[];
  }

}

The result that I want should look something like

I tried to do this

  <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>

But the error that I get is 'NgFor only supports binding to Iterables such as Arrays.' (Even though it is array, and in code I can do this console.log(this.getFois()[0]);

Note: so the table is dynamic both in columns and rows, and that is why I don't have a name for each of the arrays or formGroups. Any help or hints are greatly appreciated.

user1328889 user1328889 · Accepted Answer · 2021-04-06T10:50:48

In case anyone is interested I was able to do it by using indexes as 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>

And in the component:

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

  }

Angular reactive forms: unnamed FormArray inside FormArray

1 Answers