当用户完成键入时，Angular2控制验证

Question

我想对服务器执行验证以检查是否已经注册了电子邮件，但仅在" blur"上不在价值更改上

我可以选择添加多个控件，这就是我如何组织我的表格

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

我希望电子邮件验证在Blur上运行，因为它正在执行HTTP请求，以便在执行HTTP请求时显示等待上述可行，但在每个键盘上都可以使用，但在Blur事件中不适用

Answer 1

我不知道您可以延迟控制验证。

但是有两件事可以延迟：

• HTTP请求。 debounceTime()操作员可让您在用户完成输入以执行请求后等待n毫秒。请参阅此示例。
• 显示错误。即使将字段的有效性计算为用户类型，您仍然可以等待Blur to Blur to show error。当字段模糊时，将标志设置为true： <input (blur)="displayError=true">。然后使用该标志显示错误：<div *ngIf="error && displayError">Error message</div>。