How to add user input field row to Mat Table dataSource

I have loaded purchase invoice item list in a mat-table dataSource .And,Imagine following item list fields like, No ItemName ItemCode Quantity ItemPrice Tax TaxAmount TotalPrice 1 Item1 IT001 [input field] 100 9% 10 110

And, my question is "Quantity" column field enter some no and submit the form, dataSource pass to service and save the data in database. How to pass user input quantity to dataSource..?

                      <!-- Position Column -->
                      <ng-container matColumnDef="No">
                          <th mat-header-cell *matHeaderCellDef> No. </th>
                          <td mat-cell *matCellDef="let element;let i = index"> {{ i+1 }} </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <!-- Name Column -->
                      <ng-container matColumnDef="MaterialName">
                          <th mat-header-cell *matHeaderCellDef > MaterialName </th>
                          <td mat-cell *matCellDef="let element">
                              {{element.MaterialName}}
                          </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <ng-container matColumnDef="MaterialCode">
                          <th mat-header-cell *matHeaderCellDef > MaterialCode </th>
                          <td mat-cell *matCellDef="let element">
                              {{element.MaterialCode}}
                          </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>
                      <ng-container matColumnDef="Quantity">
                          <th mat-header-cell *matHeaderCellDef > Quantity </th>
                          <td mat-cell *matCellDef="let element"> 
                              <mat-form-field class="" appearance="outline" >
                                  <input matInput placeholder=""  [value]="element.Quantity" >
                              </mat-form-field>  
                          </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <ng-container matColumnDef="ValuationPrice">
                          <th mat-header-cell *matHeaderCellDef > ValuationPrice </th>
                          <td mat-cell *matCellDef="let element"> {{element.ValuationPrice | currency}} </td>
                          <td mat-footer-cell *matFooterCellDef> Total : {{getTotalCost() | currency}}   </td> 
                          <!--<td mat-footer-cell *matFooterCellDef> Total : {{ab | currency}}   </td>>-->

                      </ng-container>

                      <ng-container matColumnDef="Tax">
                        <th mat-header-cell *matHeaderCellDef > Tax </th>
                        <td mat-cell *matCellDef="let element"> {{element.Tax}} </td>
                        <td mat-footer-cell *matFooterCellDef>     </td>

                      </ng-container>

                      <ng-container matColumnDef="TaxAmount">
                        <th mat-header-cell *matHeaderCellDef > TaxAmount </th>
                        <td mat-cell *matCellDef="let element"> {{element.TaxAmount}} </td>
                        <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <ng-container matColumnDef="TotalAmount">
                        <th mat-header-cell *matHeaderCellDef > TotalAmount </th>
                        <td mat-cell *matCellDef="let element"> {{element.TotalAmount}} </td>
                        <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <ng-container matColumnDef="delete">
                          <th mat-header-cell *matHeaderCellDef> Delete </th>
                          <td mat-cell *matCellDef="let element">
                              <button mat-icon-button color="warn" (click)="deleteItem(element)">
                                <mat-icon class="mat-18">delete</mat-icon>
                            </button>
                          </td>
                          <td mat-footer-cell *matFooterCellDef>     </td>
                      </ng-container>

                      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

                      <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>

                  </table>```