时间戳

首页 > 解决方案 > 在Angular中使用不同的反应形式文本框进行计算

angular - 在Angular中使用不同的反应形式文本框进行计算

问题描述

我在 Angular-9 应用程序中有一个表单，包含几个文本框，我的FormGroup对象如下所示：

ngOnInit(): void {
  this.initForm();
  this.conditionalValidation();
}

initForm() {
    this.formCreateNewPlan = this.fb.group({
      channel: new FormControl('', { validators: [Validators.required], updateOn: 'blur' }),
      template: new FormControl('', { validators: [Validators.required], updateOn: 'blur', }),
      name: new FormControl('', {
        validators: [
          Validators.required, Validators.minLength(2), Validators.pattern(RegexPatterns.AlphaNumeric),], updateOn: 'blur'
      }),
      description: new FormControl('', {
        validators: [Validators.pattern(RegexPatterns.AlphaNumeric)], updateOn: 'blur'
      }),
      planBasis: new FormControl('', { validators: [Validators.required], updateOn: 'blur' }),
      startDate: new FormControl('', { validators: [Validators.required], updateOn: 'blur' }),
      endDate: new FormControl('', { validators: [Validators.required], updateOn: 'blur' }),
      circulation: [null],
      percentResponse: [null],
      orders: [null],
      units: [null],
      unitsPerOrder: [null],
      revenuePerOrder: [null],
      revenue: [null],
      unusualDemandRevenue: [null],
    });
  }

另外，我正在执行条件验证，如下所示：

conditionalValidation() {
    const circulation = this.formCreateNewPlan.get('circulation');
    const percentResponse = this.formCreateNewPlan.get('percentResponse');

    const orders = this.formCreateNewPlan.get('orders');
    const units = this.formCreateNewPlan.get('units');
    const unitsPerOrder = this.formCreateNewPlan.get('unitsPerOrder');
    const revenuePerOrder = this.formCreateNewPlan.get('revenuePerOrder');
    const revenue = this.formCreateNewPlan.get('revenue');
    const unusualDemandRevenue = this.formCreateNewPlan.get('unusualDemandRevenue');

    this.formCreateNewPlan.get('channel').valueChanges.subscribe(c => {
      if (c == "46") {
        circulation.setValidators([Validators.required, Validators.pattern(RegexPatterns.Numeric)]);
        percentResponse.setValidators([Validators.required, Validators.pattern(RegexPatterns.Numeric)]);
      } else {
        circulation.clearValidators();
        percentResponse.clearValidators();
      }

      if (c == "64") {
        orders.setValidators([Validators.required, Validators.pattern(RegexPatterns.Numeric)]);
        units.setValidators([Validators.required, Validators.pattern(RegexPatterns.Numeric)]);
        unitsPerOrder.setValidators([Validators.required, Validators.pattern(RegexPatterns.Decimal)]);
        revenuePerOrder.setValidators([Validators.required, Validators.pattern(RegexPatterns.Decimal)]);
        revenue.setValidators([Validators.required, Validators.pattern(RegexPatterns.Decimal)]);
        unusualDemandRevenue.setValidators([Validators.required, Validators.pattern(RegexPatterns.Decimal)]);
      } else {
        orders.clearValidators();
        units.clearValidators();
        unitsPerOrder.clearValidators();
        revenuePerOrder.clearValidators();
        revenue.clearValidators();
        unusualDemandRevenue.clearValidators();
      }

      circulation.updateValueAndValidity();
      percentResponse.updateValueAndValidity();

      orders.updateValueAndValidity();
      units.updateValueAndValidity();
      unitsPerOrder.updateValueAndValidity();
      revenuePerOrder.updateValueAndValidity();
      revenue.updateValueAndValidity();
      unusualDemandRevenue.updateValueAndValidity();
    });
  }

在这里，我想根据TextBox值（更改时）进行一些计算：

  1. 订单 – 当目录为渠道时，这是一个计算字段（流通 x 响应百分比）。
  2. 收入 - 这是一个计算字段（订单 x 收入/订单）。
  3. 单位/订单 - 这是一个计算字段（单位/订单）

如何以反应形式做到这一点？请帮助我。

标签： angularangular-reactive-forms

解决方案

我更喜欢您在要使用其值进行计算的表单字段上使用（输入）事件。

IE

.html

<input type="number" matInput (input)="calculateValues()" formControlName="circulation" />
<input type="number" [min]="0" [max]="100" matInput (input)="calculateValues()" formControlName="percentResponse" />

.ts

    calculateValues() {
      // check the fields required to make the calculations to avoid NaN errors
      if(this.formCreateNewPlan.value.circulation && this.formCreateNewPlan.value.circulation) {
        // patch the values on the form
        this.formCreateNewPlan.patchValue({
           orders: +this.formCreateNewPlan.value.circulation * +this.formCreateNewPlan.value.circulation
        });
      }
    }

推荐阅读