Angular2 - FormControl 模糊验证

我正在考虑添加一些基本的电子邮件验证来检查用户是否输入了正确的电子邮件地址。目前使用下面的方法，验证随着用户输入而更新，当输入一个字符后出错时，这看起来很奇怪。

validEmail(c: Control){
if(!c.value.match('[a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?')){
  return {
    validEmail: true
  };
}
return null;
}    

ctrlEmailAddress: Control = new Control('', Validators.compose([
Validators.required, this.validEmail]));

我想知道是否可以触发对字段模糊的验证，就像在 angularJS 中一样：

ng-model-options="{ updateOn: 'blur' }"

我知道 html 中输入字段上的模糊选项，但这不会使我的控件出错，除非有办法将控件置于错误状态。

有人能帮我指出正确的方向吗？

Thanks.

编辑：我正在寻找 Angular2 解决方案，而不是 AngularJS 解决方案。

EDIT 2

As Alex和官方文档 says, 角度版本 5.0.0为您的 ngModel 提供了新选项updateOn: 'blur'

this.email = new FormControl(null, {
   validators: Validators.required,
   updateOn: 'blur'
});

您还可以使用其他更新选项：change（默认），blur, submit.

Original

我使用指令删除焦点上的整个验证并在模糊事件后将其返回。它基于克里斯蒂安·德尚的回答。

我仅在模糊时更新有效性，因此如果值在焦点之前无效，则焦点之后也将无效。但如果您开始输入，有效性将会更新。

由于某些原因，清除顺序是有意义的，因此我首先清除异步验证器。

任何提供的建议都会有帮助=）

import { Directive } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[validate-onblur]',
  host: {
    '(focus)': 'onFocus($event)',
    '(blur)': 'onBlur($event)'
  }
})
export class ValidateOnBlurDirective {
    private validators: any;
    private asyncValidators: any;
    constructor(public formControl: NgControl) {
    }
    onFocus($event) {
      this.validators = this.formControl.control.validator;
      this.asyncValidators = this.formControl.control.asyncValidator;
      this.formControl.control.clearAsyncValidators();
      this.formControl.control.clearValidators();
    }

    onBlur($event) {
      this.formControl.control.setAsyncValidators(this.asyncValidators);
      this.formControl.control.setValidators(this.validators);
      this.formControl.control.updateValueAndValidity();
    }
}

另外还请大家持续关注本期内容Angular 2 github 线程关于 onBlur 验证

EDIT 1

还有另一个问题 - 如果我只是单击该字段，然后单击离开 - 将调用验证。如果您有任何有关它的通知（或服务器调用） - 它会在您每次执行操作时出现。所以你可以添加wasChanged属性并像这样使用它：

    @Directive({
        selector: '[validate-onblur]',
        host: {
            '(focus)': 'onFocus($event)',
            '(blur)': 'onBlur($event)',
            '(keyup)': 'onKeyup($event)',
            '(change)': 'onChange($event)',
            '(ngModelChange)': 'onNgModelChange($event)'
        }
    })
    export class ValidationOnBlurDirective {
        private validators: any;
        private asyncValidators: any;
        private wasChanged: any;
        constructor(public formControl: NgControl) {
        }
        onFocus($event) {
            this.wasChanged = false;
            this.validators = this.formControl.control.validator;
            this.asyncValidators = this.formControl.control.asyncValidator;
            this.formControl.control.clearAsyncValidators();
            this.formControl.control.clearValidators();
        }
        onKeyup($event) {
            this.wasChanged = true; // keyboard change
        }
        onChange($event) {
            this.wasChanged = true; // copypaste change
        }
        onNgModelChange($event) {
            this.wasChanged = true; // ng-value change
        }
        onBlur($event) {
            this.formControl.control.setAsyncValidators(this.asyncValidators);
            this.formControl.control.setValidators(this.validators);
            if (this.wasChanged)
                this.formControl.control.updateValueAndValidity();
        }
    }