угловые формы «подтвердить пароль» с ошибкой - PullRequest
Новая
       18

угловые формы «подтвердить пароль» с ошибкой

0 голосов
/ 17 октября 2019

Я использую угловые формы для создания формы регистра. Я сделал специальный валидатор, который проверял, совпадает ли пароль с полем подтверждения пароля. Хотя ошибка «пароль не совпадает» не отображается, ввод остается красным до тех пор, пока не будут введены все поля.

Конструктор форм с пользовательским методом проверки checkPasswords

this.registerForm = this.formBuilder.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required]],
  confirmPassword: ['', [Validators.required]]
  },
  { validator: this.checkPasswords });


checkPasswords(group: FormGroup) {
  // here we have the 'passwords' group
  let pass = group.get('password').value;
  let confirmPassword = group.get('confirmPassword').value;
  return pass === confirmPassword ? null : { notSame: true };
}

и HTML ниже 

<mat-form-field required>
    <input matInput type="password" placeholder="Password" formControlName="password">
    <mat-error>Password is not valid</mat-error>
</mat-form-field>

<mat-form-field required>
    <input matInput type="password" placeholder="Confirm password"
           formControlName="confirmPassword"
           [errorStateMatcher]="matcher">
    <mat-error *ngIf="registerForm.hasError('notSame')">Passwords do not match</mat-error>
</mat-form-field>

Я попытался выполнить некоторую отладку, и я думаю,это связано с тем, что статус группы форм является «недействительным» до тех пор, пока не будут введены все поля, но элемент управления группы форм для confirmPassword показывает действительный. Как я могу получить статус для подтверждающего пароля, чтобы использовать статус его контроля?

Спасибо

Ответы [ 2 ]

1 голос
/ 18 октября 2019

Это из-за углового материала. Если в данном элементе управления нет ошибки, <mat-error> не будет виден. Вам необходимо установить ошибку в поле confirmPassword, чтобы отобразить ошибку.

0 голосов
/ 18 октября 2019

Все ли входы красные?

Возможно, материал вводит данные, проверяет, не коснулся ли сначала элемент управления или не был ли он грязным (перед тем, как пометить его красным), но если сама форма недействительна, он сразу же помечает ее красным.

Глядя на код, кажется, что валидатор в конце вашего registerForm запускается еще до того, как пользователь заполняет поле confirmPassword, отмечая registerForm как недействительный.

ОПЦИИ:

  1. Как насчет применения валидатора checkPasswords к confirmPassword специально вместо всей формы?

  2. In checkPasswords, проверьте, не поврежден или не загрязнен элемент управления confirmPassword (кроме notSame).

...