Iterate over reactive form array object in ngFor

Question

I'm facing a strange issue with angular reactive forms in Angular v6.
I've used form arrays in angular v1.2, v1.6 and v1.7. I recently upgraded my CLI to the latest version of Angular CLI v6.0.5.

The same source code works perfectly fine in the previous version but not in the latest CLI.

The error that I receive is the following:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

The object itself looks like this:

createForm(): void {
    this.mainForm = this.formBuilder.group({
        itemRows: this.formBuilder.array([
             this.initForm()
         ])
    });
}

initForm(): FormGroup {
    return this.formBuilder.group({
        item1: ['', [Validators.required]]
        // other form controls created here.
    })
}

Angular is complaining that this.mainForm.controls.itemRows cannot be iterated over. However, please note that this.mainForm.controls.itemRows is a formarray.

The error is shown on this line in the view:

<form [formGroup]="mainForm">
    <div formArrayName="itemRows"> <!-- Problem here in v6 -->
        <div *ngFor="let itemRow of mainForm.controls.itemRows">
            <!-- rest of the form -->
        </div>
    </div>
</form>

I found recommendations (link1) (link2) (link3) that suggest I created an array from the object but it does not look clean to me, especially when dealing with complex objects like reactive forms. Has anyone encountered this issue with the latest CLI?

Also, why change what used to work perfectly? Just saying.

Padmapriya Vishnuvardhan Padmapriya Vishnuvardhan · Accepted Answer · 2018-05-28T08:37:31

itemRows is an object.

It can be iterated like this

<div *ngFor="let itemRow of mainForm.controls.itemRows.controls">

Iterate over reactive form array object in ngFor

1 Answers