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

本文 DEMO 地址：源码或最终效果

在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，否则返回多个验证器拼接后的错误信息。

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