Angular2-模糊时进行FormControl验证

本文介绍了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 和官方文档说， 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();
    }
}

另外，请继续关注有关onBlur验证的 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验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！