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

谁能帮助我指出正确的方向？

谢谢。

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

编辑2

正如Alex和official documentation所说，Angular版本5.0.0为您的ngModel updateOn提供了新选项：’blur’

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

您还可以使用其他更新选项：更改(默认)，模糊，提交。

原版的

我使用指令去除焦点上的整个验证并在模糊事件后返回它。它基于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();
    }
}

另外，请继续关注这个关于onBlur验证的Angular 2 github thread

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

Angular2 – 模糊的FormControl验证

相关文章