Angular2模板驱动的异步验证器 [英] Angular2 template driven async validator
问题描述
我在以模板驱动形式定义异步验证器时遇到问题.
I have a problem with defining asynchrous validator in template driven form.
当前我有以下输入内容:
Currently i have this input:
<input type="text" ngControl="email" [(ngModel)]="model.applicant.contact.email" #email="ngForm" required asyncEmailValidator>
带有验证器选择器 asyncEmailValidator ,该选择器指向此类:
with validator selector asyncEmailValidator which is pointing to this class:
import {provide} from "angular2/core";
import {Directive} from "angular2/core";
import {NG_VALIDATORS} from "angular2/common";
import {Validator} from "angular2/common";
import {Control} from "angular2/common";
import {AccountService} from "../services/account.service";
@Directive({
selector: '[asyncEmailValidator]',
providers: [provide(NG_VALIDATORS, {useExisting: EmailValidator, multi: true}), AccountService]
})
export class EmailValidator implements Validator {
//https://angular.io/docs/ts/latest/api/common/Validator-interface.html
constructor(private accountService:AccountService) {
}
validate(c:Control):{[key: string]: any} {
let EMAIL_REGEXP = /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;
if (!EMAIL_REGEXP.test(c.value)) {
return {validateEmail: {valid: false}};
}
return null;
/*return new Promise(resolve =>
this.accountService.getUserNames(c.value).subscribe(res => {
if (res == true) {
resolve(null);
}
else {
resolve({validateEmailTaken: {valid: false}});
}
}));*/
}
}
电子邮件正则表达式部分按预期工作,并且如果正则表达式匹配,则表单已成功验证.但是之后,我想检查电子邮件是否尚未使用,所以我为我的accountService创建了Promise.但这根本不起作用,并且表单始终处于失败状态.
Email regex part is working as expected and form is being validated successfuly if regex is matching. But after that I want to check if e-mail is not already in use, so im creating promise for my accountService. But this doesn't work at all and form is in failed state all the time.
我已经阅读了有关模型驱动表单和使用FormBuilder的信息,如下所示:
I've read about model driven forms and using FormBuilder as below:
constructor(builder: FormBuilder) {
this.email = new Control('',
Validators.compose([Validators.required, CustomValidators.emailFormat]), CustomValidators.duplicated
);
}
在 Control()的第三个参数中定义了异步验证器,但这不是我的情况,因为我使用的是不同的方法.
Which have async validators defined in third parameter of Control() But this is not my case because im using diffrent approach.
所以,我的问题是:是否可以使用模板驱动的表单创建异步验证器?
So, my question is: is it possible to create async validator using template driven forms?
推荐答案
您可以尝试使用NG_ASYNC_VALIDATORS
键而不是NG_VALIDATORS
键注册异步验证器的提供者(仅用于同步验证器):>
You could try to register the provider of your async validator with the NG_ASYNC_VALIDATORS
key and not the NG_VALIDATORS
one (only for synchronous validators):
@Directive({
selector: '[asyncEmailValidator]',
providers: [
provide(NG_ASYNC_VALIDATORS, { // <------------
useExisting: EmailValidator, multi: true
}),
AccountService
]
})
export class EmailValidator implements Validator {
constructor(private accountService:AccountService) {
}
validate(c:Control) {
return new Promise(resolve =>
this.accountService.getUserNames(c.value).subscribe(res => {
if (res == true) {
resolve(null);
}
else {
resolve({validateEmailTaken: {valid: false}});
}
}));
}
}
在angular.io网站上查看此文档:
See this doc on the angular.io website:
这篇关于Angular2模板驱动的异步验证器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!