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

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

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

跨字段驗(yàn)證

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

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

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

為此，我們同時(shí)準(zhǔn)備了驗(yàn)證器：

/**
 * 數(shù)字校驗(yàn)器
 */
export class NumberValidator {
  /**
   * 偶數(shù)校驗(yàn)器
   */
  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ù)校驗(yàn)器
   */
  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ù)' };
    }
  }
}

使用獨(dú)立的驗(yàn)證器

有了獨(dú)立的驗(yàn)證器后，我們可以使用類似如下的代碼，直接在跨字段校驗(yàn)器中進(jìn)行調(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)用的時(shí)候?qū)⑿枰?yàn)證的FormControl傳入即可。

如果我們的跨字段驗(yàn)證器需要同時(shí)對(duì)多個(gè)字段進(jìn)行校驗(yàn)，則還可以這樣：

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; ??

?? 處對(duì)返回的錯(cuò)誤信息進(jìn)行判斷，如果長(zhǎng)度為0，則說(shuō)明返回了{(lán)}，直接返回null，否則返回多個(gè)驗(yàn)證器拼接后的錯(cuò)誤信息。

如果你想看到具體的代碼，請(qǐng)點(diǎn)擊：示例代碼

總結(jié)

到此這篇關(guān)于Angular跨字段驗(yàn)證器中如何直接調(diào)用其它獨(dú)立的驗(yàn)證器的文章就介紹到這了,更多相關(guān)Angular調(diào)用其它獨(dú)立驗(yàn)證器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: