@angular/forms 源碼解析之 Validators

咱們知道,@angular/forms 包主要用來解決表單問題的,而表單問題很是重要的一個功能就是表單校驗功能。數據校驗很是重要,不單單前端在發請求給後端前須要校驗數據,後端對前端發來的數據也須要校驗其有效性和邏輯性,尤爲在存入數據庫前還得校驗數據的有效性。 @angular/forms 定義了一個 Validator 接口,並內置了 RequiredValidatorCheckboxRequiredValidatorEmailValidatorMinLengthValidatorMaxLengthValidatorPatternValidator 六個經常使用的校驗指令,每個 validator 都實現了 Validator 接口。這些校驗指令的使用很簡單,好比使用 EmailValidatorRequiredValidator 指令來校驗輸入的數據得是 email 且不能爲空:css

<input type="email" name="email" ngModel email required>
複製代碼

這樣輸入的若是不是 email 格式,EmailValidator 指令就會校驗錯誤,會給 host(這裏也就是 input 元素)添加 'ng-invalid' class,這樣開發者能夠給這個 class 添加一些 css 效果,提升用戶體驗。那麼,其內部運行過程是怎樣的呢?前端

實際上,上面 demo 中不單單綁定了 NgModel 指令,還綁定了 EmailValidatorRequiredValidator 兩個 validators 指令。指令在實例化時是按照聲明順序依次進行的,有依賴的指令則置後,FormsModule 先是聲明瞭 RequiredValidator 指令,而後是 EmailValidator 指令,最後纔是 NgModel,因此實例化順序是 RequiredValidator -> EmailValidator -> NgModel,同時因爲 NgModel 依賴於 NG_VALIDATORS,因此就算 NgModel 聲明在前也會被置後實例化。RequiredValidatorEmailValidator 在實例化過程當中都會提供 REQUIRED_VALIDATOREMAIL_VALIDATOR 兩個服務,而且 StaticProvider 的 multi 屬性設置爲 true,這樣能夠允許有多個依賴服務(這裏是 RequiredValidator 和 EmailValidator 對象)公用一個令牌(這裏是 NG_VALIDATORS),multi 屬性做用能夠查看源碼中說明。當 NgModel 實例化時,其構造依賴於 @Self() NG_VALIDATORS@Self() 表示從 NgModel 指令掛載的宿主元素中去查找這個令牌擁有的服務,NgModel 沒有提供 NG_VALIDATORS,可是掛載在 input 宿主元素上的 REQUIRED_VALIDATOREMAIL_VALIDATOR 卻提供了這個服務,因此 NgModel 的依賴 validators 就是這兩個指令組成的對象數組。react

NgModel 在實例化時,因爲沒有父控件容器,因此會調用 _setUpStandalone(),從而調用 setUpControl() 方法設置 FormControl 對象的 同步 validator 依賴(若是有異步 validator 依賴,也同理),這個依賴是調用 Validators.compose() 返回的一個 ValidatorFn 函數。而 Validators.compose() 參數調用的是 NgModel.validator,也就是調用 composeValidators 得到 ValidatorFn,內部會調用 normalizeValidator() 函數轉換爲爲 (AbstractControl) => Validator.validate()。因此,和 input 控件綁定的 FormControl 對象就有了同步 validator 數據校驗器。那在 input 輸入框內輸入數據時,校驗器是在什麼時候被運行的呢?git

NgModel 實例化時,還安裝了一個 視圖數據更新回調,這樣當 input 視圖內的數據更新時,就會運行這個回調,該回調會更新 FormControl 的 value 值,即 FormControl.setValue() 函數,內部會調用 updateValueAndValidity,從而開始 運行數據校驗器,上文說到 FormControl 的 validator 依賴其實是 Validators.compose() 返回的函數,因此此時會運行 這個回調函數,而這個 presentValidators 是 (AbstractControl) => RequiredValidator.validate() 和 (AbstractControl) => EmailValidator.validate() 組成的數組,而後依次 運行 這兩個 Validator 的 validate() 函數。若是校驗錯誤,就返回 ValidationErrors,好比 email 校驗器返回的是 {'email': true}。這裏還需注意的是,Validator 指令裏的 validate() 函數實際上調用的仍是 Validator 類 的對應的靜態函數,這樣驗證器指令能夠直接在模板裏使用,而 Validator 類的靜態函數能夠在 響應式表單 中使用。校驗器運行完成後,會設置 FormControl.errors 屬性,從而計算 FormControl 的 status 屬性,假設校驗錯誤,則 status 屬性值爲 INVALID。那若是校驗錯誤,input 的 class 爲什麼會添加 'ng-invalid' 呢?由於實際上還有一個 NgControlStatus 指令 也在綁定這個 input 元素,該指令的依賴會從當前掛載的宿主元素查找 NgControl,本 demo 中就是 NgModel 指令,NgControlStatus 指令 的 host 屬性中的 '[class.ng-invalid]': 'ngClassInvalid',會運行 ngClassInvalid() 函數判斷是否會有 'ng-invalid' class,而校驗錯誤時,該函數運行結果是 true,由於它讀取的是 FormControl.invalid 屬性,則 'ng-invalid' class 就會被添加到 input 元素上。同理,其餘 class 如 pending、dirty 等也一樣道理。這樣就理解了校驗器的整個運行過程,也包括爲什麼校驗錯誤時會自動添加描述控件狀態的 'ng-invalid' classgithub

咱們已經理解了 Validators 的內部運行流程,這樣寫一個自定義的 Validator 就很簡單了(固然,寫一個自定義的 Validator 不須要去了解 Validator 內部運行原理)。好比,寫一個自定義校驗器 ForbiddenValidator,input 輸入內容不能還有某些字符串,那能夠模仿 @angular/forms 中的內置校驗器 MinLengthValidator 寫法:數據庫

import {Validators as FormValidators} from '@angular/forms';

export class Validators extends FormValidators {
  static forbidden(forbidden: string): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      return (new RegExp(forbidden)).test(control.value) ? {forbidden: true} : null;
    }
  }
}

export const FORBIDDEN_VALIDATOR: StaticProvider = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => ForbiddenValidator),
  multi: true
};

@Directive({
  selector:
    ':not([type=checkbox])[forbidden][formControlName],:not([type=checkbox])[forbidden][formControl],:not([type=checkbox])[forbidden][ngModel]',
  providers: [FORBIDDEN_VALIDATOR],
})
export class ForbiddenValidator implements Validator{
  private _onChange: () => void;
  private _validator: ValidatorFn;
  
  @Input() forbidden: string;
  
  ngOnChanges(changes: SimpleChanges) {
    if ('forbidden' in changes) {
      this._createValidator();
      if (this._onChange) this._onChange();
    }
  }
  
  registerOnValidatorChange(fn: () => void): void {
    this._onChange = fn;
  }
  
  validate(c: AbstractControl): ValidationErrors | null {
    return this.forbidden ? this._validator(c) : null;
  }
  
  private _createValidator(): void {
    this._validator = Validators.forbidden(this.forbidden);
  }
}
複製代碼

這樣就能夠在組件模板中使用了:後端

@Component(
{
    template: `
        <h2>Template-Driven Form</h2>
        <input type="email" name="email" [ngModel]="email" email required [forbidden]="forbiddenText">
        <h2>Reactive-Driven Form</h2>
        <input type="email" name="email" [formControl]="emailFormControl" email required [forbidden]="forbiddenText">
        <h2>Update Forbidden Text</h2>
        <input [(ngModel)]="forbiddenText">
    `
})
export class AppComponent {
    // custom validator
      forbiddenText = 'test';
      email = 'test@test.com';
      emailFormControl = new FormControl('test@test.com', [Validators.forbidden(this.forbiddenText)]);
}
複製代碼

完整代碼可參見 stackblitz demo數組

因此,在理解了 Validator 內部運行原理後,不單單能夠寫自定義的 Validator,該 Validator 能夠用於模板驅動表單也能夠用於響應式表單,還能明白爲啥須要那麼寫,這個很重要!bash

也可閱讀 @angular/forms 相關文章瞭解 NgModel 雙向綁定內部原理:@angular/forms 源碼解析之雙向綁定異步

相關文章
相關標籤/搜索