我正在考虑添加一些基本的电子邮件验证,以检查用户是否输入了正确的电子邮件地址。目前使用下面的方法,验证随着用户输入而更新,当输入一个字符后出现错误时,这看起来很奇怪。
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解决方案。
发布于 2016-09-13 10:51:50
在rc6中找到了一种方法。
1-创建指令: validate-onblur.directive.ts
@Directive({
selector: '[validate-onblur]',
host: {
'(focus)': 'onFocus($event)',
'(blur)': 'onBlur($event)'
}
})
export class ValidateOnBlurDirective {
constructor(public formControl: NgControl) {
}
onFocus($event) {
this.formControl.control.markAsUntouched(false);
}
onBlur($event) {
this.formControl.control.markAsTouched(true);
}
}
然后在html模板中,只需将指令添加到表单中,我的示例使用ReactiveFormsModule模型。
然后将以下内容添加到错误消息中:
<input type="text" formControlName="full_name" validate-onblur />
<span *ngIf="formAccountDetails.controls.full_name.touched && !formAccountDetails.controls.full_name.valid && !formAccountDetails.controls.full_name.pristine" class="errors">
...
</span>
发布于 2017-02-10 09:44:24
我对Alex Shestakov的解决方案做了一点改进,顺便说一句,这个方案已经起作用了,为了避免在保持焦点不变的情况下将控件状态设置为有效。
@Directive({
selector: '[validate-onblur]',
host: {
'(focus)': 'onFocus($event)',
'(blur)' : 'onBlur($event)'
}
})
export class ValidateOnBlurDirective {
private validators: any;
private asyncValidators: any;
private hasFocus = false;
constructor(public formControl: NgControl) {
}
onFocus($event) {
this.hasFocus = true;
this.validators = this.formControl.control.validator;
this.asyncValidators = this.formControl.control.asyncValidator;
this.formControl.control.clearAsyncValidators();
this.formControl.control.clearValidators();
this.formControl.control.valueChanges
.filter(() => this.hasFocus)
.subscribe(() => this.formControl.control.markAsPending());
}
onBlur($event) {
this.hasFocus = false;
this.formControl.control.setAsyncValidators(this.asyncValidators);
this.formControl.control.setValidators(this.validators);
this.formControl.control.updateValueAndValidity();
}
}
这样,只要控件保持焦点,它就会保持挂起状态。这将有助于避免当控件在获得焦点之前是无效的,然后一旦用户开始在它上键入,它就被标记为有效的情况,在模糊事件发生之前,当再次设置验证器时,应该确定控件的实际有效性。
发布于 2015-11-25 23:49:35
你可以
[class.has-error]="!form.controls['ctrlEmailAddress'].valid"
这将在您更改模型时立即添加has-error类。所以基本上你不需要模糊来进行验证检查。
这解决了angular 2.0.0测试版的问题;)
https://stackoverflow.com/questions/33866824
复制相似问题