Html 小计=数量*单价类型脚本

Html 小计=数量*单价类型脚本,html,angular,typescript,Html,Angular,Typescript,我有一个表格addProductForm,在这个表格中我想计算小计=数量*单价 this.addProductForm = this.fb.group({ 'product_id': new FormControl('', Validators.required), 'Quantity': new FormControl('', Validators.required), 'Unit_price': new FormControl('', Validators

我有一个表格
addProductForm
,在这个表格中我想计算
小计=数量*单价

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代码中,我希望在编写单价和数量时显示subtotale

<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>

生产力*
{{item.product_type_name}

提交

Thanx提前

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

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