Save all inputs from the user

Issue

I have an table with a column for the user input. Obviously, the table can have several rows, every row with an input for the user. Under the table I have a button for saving. My question is: if a user type in several inputs, how can I save all the inputs?
Example: my table is something like:

row1 -> input (user writes here: "stack")
row2 -> input (user writes here: "overflow")
saveButton

I want to save "stack" and also "overflow".
My code is:

<div class="mat-elevation-z8 layout-container">
  <table mat-table [dataSource]="dataSourceTable">
    <ng-container matColumnDef="userInput">
      <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Input</th>
      <td mat-cell *matCellDef="Input">
        <mat-form-field class="full-width">
          <input matInput/>
        </mat-form-field>
      </td>
    </ng-container>
  </table>
</div>
<button mat-raised-button color="warn" (click)="saveInput()">Save</button>

Solution

You can define your cell like this:

<ng-container matColumnDef="userInput">
  <th mat-header-cell *matHeaderCellDef [attr.rowspan]="2">Input</th>
  <td mat-cell *matCellDef="let Input">
    <mat-form-field class="full-width">
      <input matInput [(ngModel)]="Input"/>
    </mat-form-field>
  </td>
</ng-container>

and setup an ngModel on your Input data.

Answered By – Francesco Lisandro

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.