[英]Combining result (ORing) of 2 validators in Angular and using it as single validating factor
我想通过 ORing 2 个验证结果来获取表单字段的验证结果
例如
this.registerForm = this.formBuilder.group({
username: ['', [Validators.required,Validators.pattern(USERNAME_REGEX) || Validators.email]],
});
这样的事情可能吗?
限制条件:用户名应该是电子邮件地址或应该是匹配用户名正则表达式模式的有效用户名
我想使用 angular 的内置电子邮件验证器的输出和自定义正则表达式模式的输出来识别该字段是否有效。
PS:我参考了这篇文章 -> Angular 2 组合表单验证,但它不符合我的条件
您需要编写自己的验证器函数。
private loginNameValidator = (): ValidatorFn => {
const userNameValidator = Validators.pattern(USERNAME_REGEX);
return (control: AbstractControl): ValidationErrors | null => {
const userNameInvalid = userNameValidator(control);
if (!userNameInvalid) {
return null;
}
const emailInvalid = Validators.email(control);
if (!emailInvalid) {
return null;
}
return { loginNameInvalid: true };
};
};
用它
this.registerForm = this.formBuilder.group({
username: ['', [Validators.required, this.loginNameValidator()]],
});
没有内置功能可以满足您的要求。
您必须为此实现自定义验证器。
public userNameOrEmailValidator(): ValidatorFn => {
return (control: AbstractControl): ValidationErrors | null => {
const userNameRegex = // TODO: define username regex here.
const emailRegex = // TODO: define email regex here.
const isValid = userNameRegex.test(control.value) || emailRegex .test(control.value);
return !isValid? {inValidUserName: true} : null;
};
}
像这样调用它:
this.registerForm = this.formBuilder.group({
username: ['', [Validators.required, userNameOrEmailValidator()]],
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.