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

Question

请在 stackblitz 中引用该项目
here .

可以看出，我的 react 形式与控件为 firstNumber , secondNumber和 thirdNumber .我需要验证表单控件 thirdNumber使得它的值不应该大于在firstNumber中具有最小值的表单控件的值。和 secondNumber .

自定义验证器 validateThirdNumber每当表单控件 thirdNumber 时，组件中的内容都可以正常工作改变，但我需要
对表单控件的更改进行验证 firstNumber和 secondNumber也是因为验证逻辑可以随着表单控件的变化而变化firstNumber和 secondNumber .

为此，我添加了一个关于更改表单控件的事件 firstNumber和 secondNumber我在哪里标记表单控件 thirdNumber如 touched但它的验证似乎没有被触发。

那么，如何触发表单控件的验证 thirdNumber关于表单控件的更改 firstNumber和 secondNumber ?

还有，为什么是this.myFormGroup即使在绑定(bind) 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)事件删除它们