Angular2-模糊时进行FormControl验证 [英] Angular2 - FormControl Validation on blur

问题描述

我正在考虑添加一些基本的电子邮件验证，以检查用户是否输入了正确的电子邮件地址.当前使用下面的方法，验证会随着用户类型的更新而更新，输入一个字符后，如果输入错误，验证将显得奇怪.

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 和 Angular 2 github线程 >

---

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

I'm looking at adding some basic email validation to check that the user has put in a correct email address. Currently using the method below, the validation updates as the user types, which looks odd when it errors after entering one character.

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]));

I was wondering if it is possible to trigger the validation on blur of the field, like in angularJS with:

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

I'm aware of the blur option on the input field within the html but this doesn't put my control in error unless there is a way to put the control into an error state.

Could anyone help point me in the right direction?

Thanks.

Edit: I'm looking for a angular2 solution, not an angularJS solution.

解决方案

EDIT 2

As Alex and the official documentation says, Angular version 5.0.0 has new option for your ngModel updateOn: 'blur'

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

Also you can use other update options: change (default), blur, submit.

---

Original

I use directive where remove whole validation on focus and return it back after blur event. It based on Cristian Deschamps answer.

I update validity only on blur, so if value was invalid before focus it will be invalid after. But if you start input, validity will be updated.

For some reasons clearing order make sense, so I clear async validators first.

Any provided suggestion will be helpful =)

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

Also, please stay tuned on this Angular 2 github thread about onBlur validation

---

EDIT 1

There is another problem - if I just click on the field and after click away - validation will be called. If you have any notification about it (or server calls) - it would appear every time you do it. So you can add wasChanged property and use it like this:

    @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验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！