J'essaie de calculer le pourcentage de remise ou le montant de la remise à partir du prix catalogue en utilisant des formes réactives angulaires 6.
form.component.html (simplifié)
...
<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 (simplifié)
...
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();
});
}
}
le code ci-dessus est ce que j'ai obtenu jusqu'à présent et ne fonctionne pas, crée une erreur maximale de pile d'appels atteinte.
Comment puis-je définir la valeur du montant de la remise si le prix catalogue et le pourcentage de remise sont modifiés et définir la valeur du pourcentage de remise lorsque le prix catalogue et le montant de la remise sont modifiés?
vous pouvez utiliser l'option {emitEvent: false} pour patchValue et 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});
});
}
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots