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

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