Save all inputs from the user-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

You can do a couple things:

Local storage

The Local storage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year. To set item:
```
localStorage.setItem(identifier, value)
```
To get item:
```
localStorage.getItem(identifier)
```
Session storage

The Session storage object is just local storage, but it gets deleted when the session ends (aka closing the tab). To set item:
```
sessionStorage.setItem(identifier, value)
```
To get item:
```
sessionStorage.setItem(identifier)
```
Cookies Cookies are like variables, but when a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.
```
document.cookies
```

CodePudding user response：

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.