Bdtjtk

I have a dynamic reactive form with the following structure, which is intended to create a matrix consisting of an arbitrary number of users each with an arbitrary number of userRoles:

this.form = this.formBuilder.group({

  users: this.formBuilder.array(

    this.usersRoles.map(

      urs => this.formBuilder.group({

        userRoles: new FormArray(

          urs.map(r => new FormControl(r))

        )

      })

    )

  )

});

In the above code, this.usersRoles is an an array of boolean values (e.g 0: true, 1: false, 2: false, etc) representing the initial state of a checkbox stored as FormControl(r).

When this structure is populated with data, the form is rendered in a table as follows:

  <tr formArrayName="users" *ngFor="let user of form['controls']['users']['controls']; index as u">

    <td *ngFor="let userRole of user['controls']['userRoles']['controls']; index as i">

        <input type="checkbox" [formControlName]="i">

    </td>

  </tr>

My problem is with binding the rendered form to the underlying array of controls. As written above, this html generates the error "control.registerOnChange is not a function", which seems to indicate that the template cannot find the control from the form group.

I feel like I am missing something simple here, but can't quite figure out what it might be. For instance, I tried adding formArrayName="userRoles" to the td that wraps the checkbox, thinking that would be required in order to differentiate the checkboxes in one user row from another, but then received "Cannot find control with path: 'users -> userRoles'".

Interestingly, the first user order renders fine (albeit without any boxes being checked) before triggering errors so I think I'm on to something with that forArrayName thing... Any help is much appreciated!

Indeed this turned out to be an issue of needing to add some more attributes to the markup, complicated by the use of tables, which limit the opportunity to nest, as one might do with divs. Fortunately we have ng-container to help with that.

The key here was to ensure that the html elements reflected the form definition, so we needed a repeating element (ng-container) for the parent array - marked with formArrayName="users", and another repeating element (td) marked with formArrayName="userRoles" for the child array. The child array needed a wrapper as well marked with formGroupName which our tr provided. This gets a dynamic name from the index of the parent array ngFor.

The template frag below works perfectly.

<ng-container formArrayName="users" *ngFor="let user of form['controls']['users']['controls']; index as u">

    <tr [formGroupName]="u">

        <td formArrayName="userRoles" *ngFor="let userRole of user['controls']['userRoles']['controls']; index as i">

            <input type="checkbox" [formControlName]="i">{{i}}

        </td>

    </tr>

</ng-container>