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