[英]How to calculate value from multiple inputs using angular reactive forms?
我正在嘗試使用角度6反應形式從定價中計算折扣百分比或折扣金額。
form.component.html (簡體)
...
<form [formGroup]="productForm">
<mat-form-field class="quat-width">
<span matPrefix>$ </span>
<input matInput type="number" name="CostPrice" formControlName="CostPrice">
</mat-form-field>
<mat-form-field class="quat-width">
<span matPrefix>$ </span>
<input matInput type="number" name="ListPrice" formControlName="ListPrice">
</mat-form-field>
<mat-form-field class="quat-width">
<span matPrefix>$ </span>
<input matInput type="number" name="DiscountAmount" formControlName="DiscountAmount">
</mat-form-field>
<mat-form-field class="quat-width">
<span matPrefix>% </span>
<input matInput type="number" name="DiscountPercent" formControlName="DiscountPercent">
</mat-form-field>
</form>
form.component.ts (簡體)
...
export class ProductFormComponent implements OnInit {
productForm: FormGroup;
constructor(
private fb: FormBuilder,
private productService: ProductsService) { }
ngOnInit() {
this.createForm();
}
createForm() {
this.productForm = this.fb.group({
DiscountAmount: [0],
DiscountPercent: [0],
DiscountPrice: [0],
ListPrice: [0],
});
this.productForm.valueChanges.debounce(250).subscribe(val =>{
if (val.ListPrice > 0 && val.DiscountAmount > 0) {
const newVal = Math.round((val.ListPrice / val.DiscountAmount) * 100);
this.productForm.controls.DiscountPercent.patchValue(newVal);
}
if (val.ListPrice > 0 && val.DiscountAmount > 0) {
const newVal = Math.round((discPercent / 100) * val.ListPrice);
this.productForm.controls.DiscountAmount.patchValue(newVal);
}
}
this.validateForm();
}
validateForm() {
Object.keys(this.productForm.controls).forEach(key => {
this.productForm.controls[key].markAsTouched();
this.productForm.controls[key].updateValueAndValidity();
});
}
}
上面的代碼是我到目前為止所獲得的並且無法正常工作,創建了一個最大的調用堆棧到達錯誤。
如果更改標價和折扣百分比時如何設置折扣金額的值,以及更改標價和折扣金額時如何設置折扣百分比的值?
您可以將{emitEvent:false}選項用於patchValue和updateValueAndValidity
this.productForm.valueChanges.subscribe(val =>{
if (val.ListPrice > 0 && val.DiscountAmount > 0) {
const newVal = Math.round((val.ListPrice / val.DiscountAmount) * 100);
this.productForm.controls.DiscountPercent.patchValue(newVal, {emitEvent: false});
}
if (val.ListPrice > 0 && val.DiscountAmount > 0) {
const newVal = Math.round((val.DiscountPercent / 100) * val.ListPrice);
this.productForm.controls.DiscountAmount.patchValue(newVal, {emitEvent: false});
}
this.validateForm();
});
}
validateForm() {
Object.keys(this.productForm.controls).forEach(key => {
this.productForm.controls[key].markAsTouched();
this.productForm.controls[key].updateValueAndValidity({emitEvent: false});
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.