Angular2 - 模糊时的 FormControl 验证

Question

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

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 中输入字段上的模糊选项，但这不会使我的控件出错，除非有办法将控件置于错误状态。

谁能帮我指明正确的方向？

谢谢。

编辑:我正在寻找 angular2 解决方案，而不是 angularJS 解决方案。

Answer 1

编辑 2

作为Alex和 official documentation说，Angular 版本 5.0.0 为您的 ngModel updateOn: 'blur'

提供了新选项

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

您还可以使用其他更新选项:change(默认)、blur、submit。

---

原创

我使用指令删除焦点上的整个验证并在模糊事件后将其返回。它基于 Cristian Deschamps 的回答。

我只在模糊时更新有效性，所以如果值在聚焦之前无效，那么聚焦之后也会无效。但如果您开始输入，有效性将被更新。

出于某些原因，清除顺序很有意义，所以我首先清除异步验证器。

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

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 thread关于onBlur验证

---

编辑 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();
        }
    }