'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)
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 |
|---|
