Subtotal=Quantity*Unit_price打字本

Question

我有表格addProductForm，在这种形式下，我想计算Subtotal=Quantity*Unit_price。

this.addProductForm = this.fb.group({
      'product_id': new FormControl('', Validators.required),
      'Quantity': new FormControl('', Validators.required),
      'Unit_price': new FormControl('', Validators.required),
      'Subtotal': new FormControl('', Validators.required)
    });

Html代码

在html代码中，我想在编写unit_price和Quantity时显示子程序。

<form [formGroup]="addProductForm" (ngSubmit)="onAddProduct()" class="col s12" materialize style="text-align:center">
  <div class="row">
    <div class="input-field col s12">
      <select formControlName="product_type_id" id="product_type_id" materialize="material_select" [materializeSelectOptions]="producttype">
        <option value="" disabled selected>ProductTye*</option>
        <option *ngFor="let item of producttype; let i=index;" [value]="item.product_type_id">{{item.product_type_name}}</option>
      </select>
    </div>
    <div class="input-field col s12">
      <input formControlName="Quantity" id="Quantity " type="number" class="validate">
    </div>
    <div class="input-field col s12">
      <input formControlName="Unit_price" id="Unit_price" type="number" class="validate">
    </div>
    <div class="input-field col s12">
      <input formControlName="Subtotal" id="Subtotal" type="number" class="validate">
    </div>
  </div>
  <br>
  <div id="add_contrat_button_container" class="row">
    <button id="add_contrat_button" type="submit" class="button button1">
      SUBMIT
    </button>
  </div>
</form>

事先鸣谢

Answer 1

为数量和Unit_price输入框编写一个常见的更改事件。在这种情况下，执行计算

this.addProductForm.Subtotal= this.addProductForm.Quantity* this.addProductForm.Unit_price