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

Question

请在此处参考 stackblitz 中的项目 。

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

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

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

那么，如何在表单控件thirdNumber发生变化时触发表单控件firstNumber的验证secondNumber？

另外，为什么this.myFormGroup有时在自定义验证器中未定义（请参阅登录于app.componen.ts）line:22，即使在绑定this到其表单控件声明并this.myFormGroup在 中定义后也是如此 constructor ？

Answer 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)将事件删除