Блог

Главная - Вопросы по программированию - Как получить ошибку от пользовательского валидатора в html?

Как получить ошибку от пользовательского валидатора в html?

#angular #customvalidator

Вопрос:

У меня есть такая форма в 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-zd]{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 amp;amp; passwordControl.touched">Password must be longer than 5 symbols and must contain 1 digit, 1 lowercase and 1 uppercase letter</p>

Итак, это дает мне ошибку компиляции: «Свойство» Неверный пароль «не существует для типа «ValidatorsModel».»

Я понимаю это, но как я могу коснуться этой ошибки в html? Существуют ли какие-либо варианты, кроме написания конкретной директивы для пользовательских валидаторов и работы с ней?

Комментарии:

1. Что это ValidatorsModel ? Ты пользуешься ng-stack ? Если это так, вы должны четко указать это в своем вопросе, я не думаю, что ваша проблема напрямую связана с самим Angular.

Ответ №1:

Код Ts

 function PASSWORD_VALIDATOR(correctPattern: RegExp): ValidatorFn {
    return (control: FormControl) => {
    let urlRegEx: RegExp = new RegExp('/^(?=.*[A-Za-z])(?=.*d)[A-Za-zd]{5,}$/');
       
        if (control.value amp;amp; !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
Метки: