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.
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')
]));
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.