Iterate Angular 2+ FormArray
I solved this problem by looping through formArray.controls
:
formArray.controls.forEach((element, index) => {
...
});
If someone needs helps with iterating them in template (like I did), you can do this.
In this case we have FormArray where each child is FormControl
get myRows(): FormControl[] {
return (this.<your form group>.get('<field name>') as FormArray).controls as FormControl[];
}
And in template
*ngFor="let row of myRows"
You have a property controls
in FormArray
which is an array of AbstractControl
objects. Check the specific documentation for FormArray and you will see they also inherit from AbstractControl
like the FormControl
you posted.
Be aware that in the controls array you can have again inside FormArray
or FormGroup
objects besides FormControl
objects because there can be nested groups or arrays.
Here is simple example:
for (let control of formArray.controls) {
if (control instanceof FormControl) {
// is a FormControl
}
if (control instanceof FormGroup) {
// is a FormGroup
}
if (control instanceof FormArray) {
// is a FormArray
}
}