Как добавить строку пользовательского поля ввода в Mat Table dataSource

Question

Я загрузил список элементов счета-фактуры на покупку в источник данных mat-table. И, представьте себе следующие поля списка элементов, такие как, Нет ItemName ItemCode Количество ItemPrice Tax TaxAmount TotalPrice 1 Item1 IT001 [поле ввода] 100 9% 10 110

И, мой вопрос: в столбце «Количество» введите значение «Нет» и отправьте форму, данные отправьте в сервис и сохраните данные в базе данных. Как передать количество введенного пользователем в 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>```