未定义标识符“ ...”。 '__type'不包含这样的成员Angular FormArray

Question

I'm using the reactive form to create multiple checkboxes with FormArray but when I use it in my template got this error:

Identifier 'roleNames' is not defined. '__type' does not contain such a memberAngular

this is my htmlCode:

<form [formGroup]="createUserFormGroup" (ngSubmit)="submit()">
    <label formArrayName="roleNames"
        *ngFor="let role of createUserFormGroup.controls.roleNames.controls; let i = index">
        <input type="checkbox" [formControlName]="i">
        {{role[i].displayName}}
    </label>
    <button>submit</button>
</form>

This is my typescript code:

constructor(
public _userService: UserServiceProxy,
private _ouServiceProxy: OuServiceProxy,
private managetableService: ManageTablesService<UserDto>,
private formBuilder: FormBuilder) 
{
this.createUserFormGroup = this.formBuilder.group({
  'roleNames': new FormArray([]),
});  }

    this._userService.getRoles().subscribe(result => {
  this.roles = result["result"].items;
  this.addRoleCheckBoxes();
  // this.setInitialRolesStatus();
});

  addRoleCheckBoxes() {
debugger;
this.roles.map((roleDto, index) => {
  const control = new FormControl(index === 0);
  (this.createUserFormGroup.controls.roleNames as FormArray).push(control);
});

Answer 1

your *ngFor should be like this

*ngFor="let role of createUserFormGroup.get('roleNames')['controls']; let i = index"

Not like this

*ngFor="let role of createUserFormGroup.controls.roleNames.controls; let i = index"

And to use dynamic array

<div [formGroupName]="i">
   <input type="checkbox" [formControlName]="your control name"> // not the index of the arra
    {{role[i].displayName}}
</div>

Answer 2

Try to Update your HTML as following:

<form [formGroup]="createUserFormGroup" (ngSubmit)="submit()">
    <label [formGroup]="role"
        *ngFor="let role of createUserFormGroup.controls.roleNames.controls; let i = index">
        <input type="checkbox" [formControlName]="i">
        {{role[i].displayName}}
    </label>
    <button>submit</button>
</form>

Answer 3

I find my problem

I must change this code with roles

{{roles[i].displayName}}

no {{role[i].displayName}}

in fact, in formArray we only have the count of formControls no values of checkbox and we have to add value from another place