in Angular 21 with Angular Material 21, how can I implement a FormArray of FormGroups?

I have a Reactive Form in an Angular 21 application, and the form requires an array of a certain sub-form. (In my case the sub-form(s) define "filters" on a search.) The documentation on angular.dev only shows a case of FormArray where the array holds multiples of a single FormControl. I am struggling with a FormArray containing multiples of a FormGroup type. Here's my form in the .ts file:

myQyeryForm = this.formBuilder.group({
queryTable: [0],
filters: this.formBuilder.array([this.formBuilder.group({operator: ['']})]),
});


Note that the nested FormGroup is intended to have more than one field, I'm keeping it simple for clarity.

And here's my template, so far:

<div class="filtersbox">
@for(filter of filters.controls; track $index; let i=$index) {
<div [formGroupName]="i">
<mat-form-field>
<mat-label>Operator</mat-label>
<input matInput id="operator-{{i}}" type="text" formControlName="operator" />
</mat-form-field>
</div>
}
</div>


When I open the site in the browser, I get the following errors popping up in the dev console:

ERROR TypeError: Cannot read properties of null (reading 'addFormGroup') at i.ngOnInit (once)

ERROR TypeError: Cannot read properties of null (reading 'addControl') at i._setUpControl (once)

ERROR TypeError: Cannot read properties of undefined (reading 'controlType') at i._initializeControl (repeating indefinitely)

There are old questions on the site about this problem (eg. this one and that one) but unfortunately, Angular has changed how reactive forms with FormArrays are implemented, as well as replacing ngFor with a new way of doing loops, and those solutions don't help. In addition, I'm using Angular Material for the form fields, which may also be a problem.

Continue reading...