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-container matColumnDef="scheduledDate">
  <th mat-header-cell *matHeaderCellDef>Scheduled Date </th>
  <td mat-cell *matCellDef="let element; let i = index">
    <mat-form-field>
      <input matInput [(ngModel)]="myDates[i]" [matDatepicker]="picker" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [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-container matColumnDef="save">
  <th mat-header-cell *matHeaderCellDef></th>
  <td mat-cell *matCellDef="let element; let i = index">
    <button mat-raised-button color ="primary" type ="submit" (click)="onSaveAssignment(trainee, element, myDates[i])">Save</button>
  </td>
</ng-container>