Accessing Input Fields Inside Angular Material Table

I've been trying for days to get data from input fields inside an Angular Material Table. I am basically populating a table with values that come from an API, however whenever we d

Solution 1:

You can get the values with ngModel by creating an object containing all values using the index as attribute.

In you component, put an object:

public myDates : any = {};

Then use ngModel with the index for your input date:

<ng-containermatColumnDef="scheduledDate"><thmat-header-cell *matHeaderCellDef>Scheduled Date </th><tdmat-cell *matCellDef="let element; let i = index"><mat-form-field><inputmatInput [(ngModel)]="myDates[i]" [matDatepicker]="picker"placeholder="Choose a date"><mat-datepicker-togglematSuffix [for]="picker"></mat-datepicker-toggle><mat-datepicker #picker></mat-datepicker></mat-form-field></td></ng-container>

For each row, it will add an attribute to the object myDates. Using index permits to guarantee uniqueness. Your object will look like: {1: date1, 2: date2 ...}.

Then you can get the value by knowing the index of the row. You can get it directly when clicking on the button:

<ng-containermatColumnDef="save"><thmat-header-cell *matHeaderCellDef></th><tdmat-cell *matCellDef="let element; let i = index"><buttonmat-raised-buttoncolor ="primary"type ="submit" (click)="onSaveAssignment(trainee, element, myDates[i])">Save</button></td></ng-container>