angular - 如何从 html 中的自定义验证器获取错误?
问题描述
我在ts中有这样的形式:
this._logInForm = _formBuilder.group<ILoginModel>({
userName: ['', {
validators: [Validators.required, Validators.maxLength(10)],
updateOn: 'blur'
}],
password: ['', {
validators: [PASSWORD_VALIDATOR(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,}$/)],
updateOn: 'blur'
}
]
});
验证码:
function PASSWORD_VALIDATOR(correctPattern: RegExp): ValidatorFn {
return ((control: AbstractControl): { incorrectPassword: RegExp } | null => {
if (!correctPattern.test(control.value)) {
return { incorrectPassword: correctPattern };
}
return null;
});
}
HTML:
<p class="login__validation-error" *ngIf="passwordControl.errors!.incorrectPassword && passwordControl.touched">Password must be longer than 5 symbols and must contain 1 digit, 1 lowercase and 1 uppercase letter</p>
因此,它给了我一个编译错误:“类型'ValidatorsModel'上不存在属性'incorrectPassword'。”
我明白这一点,但我怎样才能在 html 中触摸这个错误?除了为自定义验证器编写特定指令并使用它之外,是否还有任何变体?
解决方案
TS代码
function PASSWORD_VALIDATOR(correctPattern: RegExp): ValidatorFn {
return (control: FormControl) => {
let urlRegEx: RegExp = new RegExp('/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,}$/');
if (control.value && !control.value.match(urlRegEx)) {
return {
pattern: 'Password must be longer than 5 symbols and must contain 1 digit, 1 lowercase and 1 uppercase letter'
};
} else {
return null;
}
}
};
html代码
<p class="login__validation-error" *ngIf="_logInForm .controls['password'].errors.pattern">Password must be longer than 5 symbols and must contain 1 digit, 1 lowercase and 1 uppercase letter</p>
形式变化:
password: ['', PASSWORD_VALIDATOR('password')], // password means formControlName
推荐阅读
- html - 如何在不使用图像的情况下在 css 中创建曲线
- javascript - 用nodejs处理mysql连接
- c# - 带改装的多部分内容
- asp.net - 'IEnumerable
' 不包含 'Alert_Identifier' ... 和 'IEnumerable 的定义 ' 不包含 'AlertIndex' 的定义 - latex - 使用 paracol 和 \setlength{\columnseprule}{} 改变垂直线的颜色
- spring-boot - Spring Boot 1 Actuator 是否在外部 Tomcat 中工作
- reactjs - 无法使用 Create-React-App 在 github 页面中发布我的反应应用程序 - 控制台出现错误
- r - 带置信区间的滚动回归(tidyverse)
- javascript - 每秒运行一次函数 X 次
- sql - 卡在 SQL Server 过程代码上