时间戳

首页 > 解决方案 > Angular：在更改另一个表单控件时触发表单控件验证

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

问题描述

请在 此处参考 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:22thisthis.myFormGroupconstructor

标签： angularangular-reactive-formsangular-custom-validators

解决方案

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

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)事件删除它们

推荐阅读