Angular跨字段驗證器中如何直接調(diào)用其它獨立的驗證器

更新時間：2022年03月24日 10:36:46 作者：myskies

我們在開發(fā)的時候都會用到表單,那么驗證器就是必不可少的東西,這篇文章主要給大家介紹了關(guān)于在Angular跨字段驗證器中如何直接調(diào)用其它獨立的驗證器的相關(guān)資料,需要的朋友可以參考下

跨字段驗證

由于對輸入數(shù)值的校驗是根據(jù)輸入類型來區(qū)分的，所以這里我們需要一個跨輸入類型及輸入數(shù)值的驗證器：

ngOnInit(): void {
    this.formGroup.setValidators((formGroup) => {
      formGroup = formGroup as FormGroup;
      const type = formGroup.get('type').value as number;
      if (type === 0) {
        // 驗證是否是偶數(shù) 1??
      } else {
        // 驗證是否為奇數(shù) 1??
      }
    });
  }

雖然我們可以在1??處直接寫入驗證器的邏輯，但從分工的角度上來講，這往往是最壞的一種的方案。

為此，我們同時準備了驗證器：

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

  /**
   * 奇數(shù)校驗器
   */
  static isOdd(control: AbstractControl): ValidationErrors | null {
    const value = +control.value as number;
    if (Number.isInteger(value) && value % 2 === 1) {
      return null;
    } else {
      return { isOdd: '輸入的數(shù)字不是奇數(shù)' };
    }
  }
}

使用獨立的驗證器

有了獨立的驗證器后，我們可以使用類似如下的代碼，直接在跨字段校驗器中進行調(diào)用：

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')); ??
      }
    });
  }

是的，在調(diào)用的時候?qū)⑿枰炞C的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，否則返回多個驗證器拼接后的錯誤信息。

如果你想看到具體的代碼，請點擊：示例代碼