I'm facing issue in mat-table, my input field is not working properly inside table. All rows are using one input field. Means if I type text inside the input box, all rows showing that text
my code:
<ng-container matColumnDef="Remarks">
<mat-header-cell *matHeaderCellDef>scheduled hours</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-form-field>
<input matInput [(ngModel)]="Remarks" (input)="$event.target.value.length > 2 && Remarks($event.target.value)" name="AppRemarks" #AppRemarks="ngModel" placeholder="Remarks">
</mat-form-field>
</mat-cell>
</ng-container>
I ran into this as well! Ended up being the
name
attribute throwing things off.name
is used to uniquely identify the control, so when you apply the same name to each attribute they all share the same identifier/key and get treated as one input.This should solve your issue (left some code out for brevity):