Angular自定義異步驗證器

對名稱進行重名異步判斷

<form nz-form [formGroup]="form">
    <p>
        <span class="group-name-control" nz-form-control>
    	    <input 
                 nz-input
                 placeholder="標簽組名稱" 
                 type="text" 
                 maxlength="15" 
                 formControlName="groupName">
            <span class="limit">{{ getFormControl('groupName').value.length }}/15</span>
        </span>
        <span  class="error pd-l-10" 
                     *ngIf="getFormControl('groupName').dirty
                                  && !getFormControl('groupName').valid 
                                  && getFormControl('groupName').errors?.required">
    	    請輸入標簽組名稱
        </span>
        <span class="error pd-l-10" 
            *ngIf="getFormControl('groupName').dirty
                         && !getFormControl('groupName').valid
                         && getFormControl('groupName').errors?.type === 'repeat'">
            {{ getFormControl('groupName').errors.errMsg }}
        </span>
    </p>
</form>  

    import {
        FormGroup,
        Validators,
        AbstractControl,
        ValidationErrors,
        AsyncValidatorFn
    } from '@angular/forms';

    this.form = this.fb.group({
        groupName:  ['', { Validators:[Validators.required, Validators.maxLength(15)], 
                     	        updateOn:  'blur' }],
     });

     this.form.controls['groupName'].setAsyncValidators(this.groupNameValidator(true, tag_group_name));


  /**
   * @desc 異步驗證組名是否重復
   * @param {boolean} edit
   * @param {string} [groupName] - 組名
   */
  public groupNameValidator(edit: boolean, groupName?: string): AsyncValidatorFn {
    return async (control: AbstractControl): Promise<ValidationErrors | null> => {
      const value = control.value;
      if (!value) {
        return {
          valid: false,
          required: true
        };
      } else if (edit && value === groupName) {
        return null;
      } else {
        return this.updateTagsGroupService.checkGroupName(value)
        .toPromise()
        .then((res: object) => {
          const { status } = <any> res;
          if (status === 1) {
            return Promise.resolve({
              valid: false,
              type: 'repeat',
              errMsg: '標簽組名稱重復，請重新輸入'
            });
          }
          return null;
        });
      }
    };
  }

//

性能上的注意事項

默認情況下，每當表單值變化之后，都會執行所有驗證器。對於同步驗證器，沒有什么會顯著影響應用性能的地方。不過，異步驗證器通常會執行某種 HTTP 請求來對控件進行驗證。如果在每次按鍵之后都發出 HTTP 請求會給后端 API 帶來沉重的負擔，應該盡量避免。

我們可以把 updateOn 屬性從 change（默認值）改成 submit 或 blur 來推遲表單驗證的更新時機。

new FormControl('', {updateOn: 'blur'}); // 失去焦點時驗證