如何使用 angular 反应形式从多个输入中计算价值？

Question

我正在尝试使用 angular 6 种反应形式根据标价计算折扣百分比或折扣金额。

form.component.html（简体）

...
  <form [formGroup]="productForm">
    <mat-form-field class="quat-width">
      <span matPrefix>$ &nbsp;</span>
      <input matInput type="number" name="CostPrice" formControlName="CostPrice">
    </mat-form-field>
    <mat-form-field class="quat-width">
      <span matPrefix>$ &nbsp;</span>
      <input matInput type="number" name="ListPrice" formControlName="ListPrice">
    </mat-form-field>
    <mat-form-field class="quat-width">
      <span matPrefix>$ &nbsp;</span>
      <input matInput type="number" name="DiscountAmount" formControlName="DiscountAmount">
    </mat-form-field>
    <mat-form-field class="quat-width">
      <span matPrefix>% &nbsp;</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();
      });
    }
  }

上面的代码是我到目前为止得到的，但不起作用，创建了最大调用堆栈错误。

如何在标价和折扣百分比发生变化时设置折扣金额的值，以及在标价和折扣金额发生变化时如何设置折扣百分比的值？

Answer 1

您可以为 patchValue 和 updateValueAndValidity 使用 {emitEvent: false} 选项

 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});
      });
    }

如何使用 angular 反应形式从多个输入中计算价值？

How to calculate value from multiple inputs using angular reactive forms?

javascript

calculation

angular

angular-reactive-forms