CODEWITHSUNDEEP
javascripthtmlangulartypescriptangular-material
denisiulian
denisiulian

Reputation: 273

Save all inputs from the user

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>

Upvotes: 1

Views: 165

Answers (2)

shini
shini

Reputation: 208

You can use Formbuilder then add the input fields. You then add a method onSubmit() to process the filled form that's be called within the <form> tag and add a button of type submit.

You can follow the guide here for detailed steps on how to do it.

Upvotes: 0

Francesco Lisandro
Francesco Lisandro

Reputation: 720

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.

Upvotes: 2

Related Questions