VM Clarity - невозможно использовать пользовательский валидатор с clr-control-error
Как я могу отобразить сообщение об ошибке из пользовательского валидатора, используя clr-control-error? У меня есть собственный валидатор для подтверждения соответствия пароля. Другие валидаторы, как требуется, minlength и maxlength работают хорошо. Я использую последнюю версию ясности.
signup.ts
ngOnInit() {
this.createSignUpForm();
}
createSignUpForm() {
this.signUpForm = this.fb.group({
password: ['', [
Validators.required,
Validators.minLength(4),
Validators.maxLength(12)
]],
confirmPassword: ['', Validators.required]
}, { validator: this.passwordMatchValidator });
}
passwordMatchValidator(g: FormGroup) {
return g.get('password').value === g.get('confirmPassword').value ? null
: {'mismatch' : true };
}
signup.html
<clr-password-container>
<label>Password</label>
<input clrPassword formControlName="password" />
<clr-control-error *clrIfError="'required'">This password is required!</clr-control-error>
<clr-control-error *clrIfError="'minlength'">It must be at least 4 characters!</clr-control-error>
<clr-control-error *clrIfError="'maxlength'">It must be less than 12 characters!</clr-control-error>
</clr-password-container>
<clr-password-container>
<label> Confirm Password</label>
<input clrPassword formControlName="confirmPassword"/>
<clr-control-error *clrIfError="'required'">Confirm Password is required!</clr-control-error>
<clr-control-error *clrIfError="'mismatch'">Password Confirmation must match password</clr-control-error>
</clr-password-container>
1 ответ
Решение
Вы помещаете валидатор на уровень формы, а не на уровень элемента управления формы, что означает, что он никогда не сработает для этого элемента управления. Я реорганизовал ваш пример во что-то, что работает, как вы хотите, с помощью специального валидатора в элементе управления verifyPassword.
https://stackblitz.com/edit/clarity-password-confirm-validator?file=src/app/app.component.html