Angular：在更改另一个表单控件时触发表单控件验证答案

【问题标题】：Angular: Trigger a form control validation on change of another form controlAngular：在更改另一个表单控件时触发表单控件验证
【发布时间】：2019-09-08 13:02:41
【问题描述】：

请参考 stackblitz 中的项目 here.

可以看出，我的响应式表单为firstNumber、secondNumber 和thirdNumber。我需要对表单控件thirdNumber 进行验证，使其值不应大于在firstNumber 和secondNumber 中具有最小值的表单控件的值。

只要表单控件thirdNumber 发生更改，组件中的自定义验证器validateThirdNumber 就可以正常工作，但我需要对表单控件firstNumber 和secondNumber 的更改进行验证，因为验证逻辑可以根据表单控件的更改而更改 firstNumber 和 secondNumber。

为此，我添加了一个更改表单控件firstNumber 和secondNumber 的事件，我将表单控件thirdNumber 标记为touched，但似乎没有触发其验证。

那么，如何在表单控件firstNumber 和secondNumber 更改时触发表单控件thirdNumber 的验证？

另外，为什么 this.myFormGroup 在自定义验证器中有时是未定义的（请参阅 app.componen.ts 中的日志 line:22）即使在将 this 绑定到其表单控件声明并且 this.myFormGroup 在 @987654348 中定义之后@?

【问题讨论】：

这里是更新的演示 - stackblitz.com/edit/angular-teofun。你可以使用updateValueAndValidity()函数。检查一下stackoverflow.com/questions/44759005/…。

标签： angular angular-reactive-forms angular-custom-validators

【解决方案1】：

您的最佳选择是创建您自己的自定义全局验证器。

class ValidateThirdNumber {
    static validate(control: AbstractControl) {
          console.log(control);
        if(control) {
           const firstNumber = control.get('firstNumber').value;
           const secondNumber = control.get('secondNumber').value;
           const thirdnumber = control.get('thirdNumber').value;
        if (firstNumber > secondNumber) {
          if (thirdnumber > secondNumber) {
            control.get('thirdNumber').setErrors( {greaterThanSecondNumber: true} );   
          }
        } else if (firstNumber < secondNumber) {
          if (thirdnumber > firstNumber) {
              control.get('thirdNumber').setErrors( {greaterThanFirstNumber: true} ); 
          }
        }
        }
        return null;
        }
}

表单组的初始化应该是：

 this.myFormGroup = this.fb.group({
      firstNumber: [0],
      secondNumber: [0],
      thirdNumber: [0]
    }, {validator: [ValidateThirdNumber.validate] });

你不再需要touched属性了

<span *ngIf="myFormGroup.get('thirdNumber').errors?.greaterThanFirstNumber">
  Third number cannot be greater than First Number
 </span>
    <span *ngIf=" myFormGroup.get('thirdNumber').errors?.greaterThanSecondNumber">
  Third number cannot be greater than Second Number
 </span>

你也不需要 (change) 事件删除它们

【讨论】：

【解决方案2】：

如果您想使用它，我已经创建了一个更简单的选项。未使用表单控件验证。

<div>

    <form [formGroup]="myFormGroup" #formRef="ngForm">

        First number:<input #firstNum type="number" formControlName="firstNumber"><br/>

  Second number:<input #secondNum type="number" formControlName="secondNumber"><br/>

  Third number:<input #thirdNum type="number" formControlName="thirdNumber"><br/>

    <span *ngIf="firstNum && thirdNum && (thirdNum.value > firstNum.value)">
  Third number cannot be greater than First Number
 </span>
 <hr>
    <span *ngIf="secondNum && thirdNum && (thirdNum.value > secondNum.value)">
  Third number cannot be greater than Second Number
 </span>

</form>


</div>

并删除您的 .ts 文件中的所有验证。

如果您开始创建更大的组件，那么表单验证选项将是最好的。

【讨论】：