'Cannot bind mat-select (option) inside mat-table (Mode édition form)

I create a mat-table whihc contain edition mode for rows. Rows contains inputs and select-option. I can bind inputs form(name and email here) but not for profile list (mat-selet)

enter image description here

Here is my html code

 <!-- Profile Column -->
    <ng-container matColumnDef="profile">
      <th mat-header-cell *matHeaderCellDef>Profile</th>
      <td mat-cell *matCellDef="let element; let i = index">
        <mat-label *ngIf="!UserForm.get('UserRows').value[i].isEditable">
          {{ UserForm.get("UserRows").value[i].profile.label }}
        </mat-label>
        <mat-form-field
          class="w-100"
          *ngIf="UserForm.get('UserRows').value[i].isEditable"
        >
          <mat-select
            placeholder="Profil"
            compareWith="compareProfile"
            formControlName="profile"
            [(value)]="element.value.profile"
          >
            <mat-option *ngFor="let prof of profilesList" [value]="prof">
              {{ prof.label }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </td>
    </ng-container>

Here is my TypeScript code for form initialisation

    this.UserForm = this._formBuilder.group({
  UserRows: this._formBuilder.array([]),
});

this.userProvider.getUsers().subscribe((users) => {
  this.usersList = users;
  this.UserForm = this.fb.group({
    UserRows: this.fb.array(
      this.usersList?.map((val) => {
        // const profileValue = this.profilesList.find((f) => {
        //   return f.id === val.profileId;
        // });
        return this.fb.group({
          userId: new FormControl(val.userId),
          lastName: new FormControl(val.lastName),
          firstName: new FormControl(val.firstName),
          mailAddress: new FormControl(val.mailAddress),
          profile: new FormControl(val.profileId),
          action: new FormControl("existingRecord"),
          isEditable: new FormControl(false),
        });
      })
    ), //end of fb array
  }); // end of form group cretation

  this.isLoading = false;
  this.dataSource = new MatTableDataSource(
    (this.UserForm.get("UserRows") as FormArray).controls
  );
  this.dataSource.paginator = this.paginator;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source