Angular2 – 模糊的FormControl验证

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

this.email = new FormControl(null,{
   validators: Validators.required,updateOn: 'blur'
});@H_772_2@ 
 
您还可以使用其他更新选项：更改(默认)，模糊，提交。
 
 
原版的
 
 
我使用指令去除焦点上的整个验证并在模糊事件后返回它。它基于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();
    }
}@H_772_2@ 
 
另外，请继续关注这个关于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();
        }
    }@H_772_2@