用户完成输入时的 Angular2 控件验证答案

【问题标题】：Angular2 control validation when a user finishes typing用户完成输入时的 Angular2 控件验证
【发布时间】：2017-07-24 12:30:23
【问题描述】：

我想通过服务器执行验证，以检查电子邮件是否已注册但仅在模糊而不是值更改时进行验证

我可以选择添加多个控件，这就是我组织表单的方式

    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 请求时显示等待以上工作，但适用于每次按键，但不适用于模糊事件

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

我不知道你可以延迟控件验证。

但是有两件事你可以延迟：

HTTP 请求。debounceTime() 运算符允许您在用户完成输入后等待 n 毫秒以执行请求。见this example。
错误的显示。即使该字段的有效性是根据用户键入来计算的，您仍然可以等待模糊显示错误。当字段模糊时将标志设置为真：<input (blur)="displayError=true">。然后使用该标志显示错误：<div *ngIf="error && displayError">Error message</div>。

【讨论】：