关于angular:Angular如何在跨字段验证器中直接调用其它独立的验证器

在 angular 中对于表单动静验证的一种新思路一文中咱们给出了 Angular 我的项目进行字段校验的三种办法。本文咱们将重点围绕第一种办法展开讨论。

假如有如下利用：

该利用的性能是对输出的数值的奇偶数进行判断，如果满足条件，则启用 Submit 按钮，否则不启用。

跨字段验证

因为对输出数值的校验是依据输出类型来辨别的，所以这里咱们须要一个跨 输出类型 及输出数值 的验证器：

  ngOnInit(): void {this.formGroup.setValidators((formGroup) => {
      formGroup = formGroup as FormGroup;
      const type = formGroup.get('type').value as number;
      if (type === 0) {// 验证是否是偶数 1️⃣} else {// 验证是否为奇数 1️⃣}
    });
  }

尽管咱们能够在 1️⃣处间接写入验证器的逻辑，但从分工的角度上来讲，这往往是最坏的一种的计划。
为此，咱们同时筹备了验证器：

/**
 * 数字校验器
 */
export class NumberValidator {
  /**
   * 偶数校验器
   */
  static isEven(control: AbstractControl): ValidationErrors | null {
    const value = +control.value as number;
    if (Number.isInteger(value) && value % 2 === 0) {return null;} else {return { isEven: '输出的数字不是偶数'};
    }
  }

  /**
   * 奇数校验器
   */
  static isOdd(control: AbstractControl): ValidationErrors | null {
    const value = +control.value as number;
    if (Number.isInteger(value) && value % 2 === 1) {return null;} else {return { isOdd: '输出的数字不是奇数'};
    }
  }
}

应用独立的验证器

有了独立的验证器后，咱们能够应用相似如下的代码，间接在跨字段校验器中进行调用：

  ngOnInit(): void {this.formGroup.setValidators((formGroup) => {
      formGroup = formGroup as FormGroup;
      const type = formGroup.get('type').value as number;
      if (type === 0) {return NumberValidator.isEven(formGroup.get('value')); 🟢
      } else {return NumberValidator.isOdd(formGroup.get('value')); 🟢
      }
    });
  }

是的，在调用的时候将须要验证的 FormControl 传入即可。

如果咱们的跨字段验证器须要同时对多个字段进行校验，则还能够这样：

        const result = {...Validators.required(formGroup.get(this.formKeys.image)),
          ...Validators.required(formGroup.get(this.formKeys.imageLeftTopPoint)),
          ...Validators.required(formGroup.get(this.formKeys.imageRightBottomPoint)),
          ...MapPointValidator.isPoint(formGroup.get(this.formKeys.imageLeftTopPoint)),
          ...MapPointValidator.isPoint(formGroup.get(this.formKeys.imageRightBottomPoint))
        }

        return Object.keys(result).length === 0 ? null : result; 🟩

🟩 处对返回的错误信息进行判断，如果长度为 0，则阐明返回了{}，间接返回null，否则返回多个验证器拼接后的错误信息。

如果你想看到具体的代码及成果，请点击：示例代码或最终成果