如何解决如何从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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。