javascript - 用户完成输入时的 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};
         }
      });
    }

  }
}

我希望电子邮件验证在 blur 上运行，因为它正在执行一个 http 请求，这样我就可以在执行 http 请求时显示等待以上有效但适用于每个按键但不适用于模糊事件

Answer 1

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

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

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