用戶完成輸入時的Angular2控件驗證

Question

我想與服務器進行驗證，以檢查電子郵件是否已經注冊，但僅限於模糊而不是值更改

我可以選擇添加多個控件，這就是我組織表單的方式

    ngOninit(){
      this.userForm = this._formBuilder.group({
       others: this._formBuilder.array([])  //multiple
      });

      this.onAddControl();  //allows adding multiple items
    }



    onAddControl(){

        return this._formBuilder.group({
         email: ['' [this._validateServ.emailDoesntExistsValidator.bind(this._validateServ)]
         ],

       });
   }
 }

現在在_validateServ

emailDoesntExistsValidator(control) {
  if (control.value != undefined) {
    if(!this.emailValueValidator(control)){
       return this._authService.checkExists("email",control.value)  //http request
        .map(response => {
          if (response) {
            return {'emailTaken': true};
         }
      });
    }

  }
}

我希望電子郵件驗證在模糊運行，因為它正在執行http請求，以便我可以顯示等待正在執行http請求以上工作，但適用於每個按鍵但不適用於模糊事件

Answer 1

我不知道你可以延遲控制驗證 。

但是有兩件事你可以推遲：

• HTTP請求。 debounceTime()運算符允許您在用戶完成鍵入以執行請求后等待n毫秒。 看這個例子 。
• 顯示錯誤。 即使字段的有效性是按用戶類型計算的，您仍然可以等待模糊顯示錯誤。 當字段模糊時，將標志設置為true： <input (blur)="displayError=true"> 。 然后使用該標志顯示錯誤： <div *ngIf="error && displayError">Error message</div> 。