当更改数量或价格以及ws中的总空白时更改自动总计

Question

我的表格中有2个问题，但我不明白。

1. 我想自动更改总计

  <div class="input-field col s2" style="float: right;">
          <label for="total">Total {{total}} ALL</label>
          <input readonly formControlName="total" id="total" type="text" [(ngModel)]="variable" class="validate" [value]="total">
        </div>

当我更改数量或价格时，

1. 在这种形式中，当我提交我的所有表格时，总数在ws中变为空，当我输入的内容时，值将转到ws。我不想改变价值，我希望立刻得到ws。我使用readonly输入，但不要改变任何东西

我的HTML代码：

<form [formGroup]="addsale" (ngSubmit)="onaddsale()">
  <table align="center" class="table table-bordered table-hover">
    <thead>
      <tr style="color:black;">
        <th>Product_type_id</th>
        <th>product_id</th>
        <th>Unit_price</th>
        <th>Quantity</th>
        <th>Subtotal</th>
        <th>Total</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of products; let i = index">
        <td>{{item.Product_type_id}}</td>
        <td>{{item.product_id}}</td>
        <td>
          <input formControlName="Unit_price" id="Unit_price" type="number" class="validate" [value]="item.Unit_price"> </td>
        <td>
          <input formControlName="Quantity" id="Quantity " type="number" class="validate" [value]="item.Quantity">
        </td>
        <td>
          <input readonly formControlName="Subtotal" id="Subtotal" type="number" class="validate" [value]="item.Unit_price*item.Quantity">
        </td>
      </tr>
    </tbody>
  </table>
  <br>
  <br>
  <div class="row">
    <div class="input-field col s2" style="float: right;">
      <label for="total">Total {{total}} ALL</label>
      <input readonly formControlName="total" id="total" type="text" [(ngModel)]="variable" class="validate" [value]="total">
    </div>
    <div class="input-field col s2" style="float: right;">
      <label for="amount_paid">Amount Paid:</label>
      <input formControlName="amount_paid" id="amount_paid" [value]="total" type="text" class="validate">
    </div>
  </div>
  <hr>
  <br>
  <div id="add_homebox_button_container" class="row" style="float: right;">
    <button id="add_client_button" type="submit" class="btn waves-effect waves-light">
      Register
    </button>
  </div>
</form>