Проверка соответствия пароля не работает - PullRequest
Новая
       24

Проверка соответствия пароля не работает

0 голосов
/ 06 мая 2018

Я пытаюсь настроить валидатор на форме в моем приложении Angular, чтобы проверить, совпадают ли оба введенных пароля. Я думаю, что Angular документация не очень хорошо объясняет это.

Это часть моего компонента регистрации: 

export function passwordMatchValidator(password: string): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    return password !== control.value ? { mismatch: true } : null;
  };
}

@Component({
  selector: 'app-sign-up-form',
  templateUrl: './sign-up-form.component.html'
})
export class SignUpFormComponent {
  signUpForm: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {
    this.signUpForm = this.fb.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, [Validators.required, Validators.minLength(6)]],
      passwordRepeat: [
        null,
        [Validators.required, Validators.minLength(6), passwordMatchValidator(this.password.value)]
      ]
    });
  }

  get email() {
    return this.signUpForm.get('email');
  }

  get password() {
    return this.signUpForm.get('password');
  }

  get passwordRepeat() {
    return this.signUpForm.get('passwordRepeat');
  }

Я хочу использовать следующий код в шаблоне компонента: 

<div *ngIf="passwordRepeat.errors.mismatch">
  The passwords are not the same.
</div>

К сожалению, что-то не так, потому что в консоли я получаю странную ошибку, которая говорит, что на самом деле ничего не полезно (TypeError: this.signUpForm не определено)

Надеюсь, вы сможете мне помочь.

--- Обновлено --- 

constructor(
    private fb: FormBuilder
  ) {
    this.signUpForm = this.fb.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, [Validators.required, Validators.minLength(6)]],
      passwordRepeat: [
        null,
        [Validators.required, Validators.minLength(6), passwordMatchValidator(this.password.value)]
      ]
    });
  }

passwordMatchValidator(password: string): ValidatorFn {
    return (control: AbstractControl): ValidationErrors => {
      return password !== control.value ? { mismatch: true } : null;
    };
  }

Я пытался удалить аргумент fn и возиться в валидаторе fn, чтобы получить оригинальный пароль, но ни одна из моих попыток не сработала.

1 Ответ

0 голосов
/ 06 мая 2018

При настройке валидатора здесь: 

  passwordRepeat: [
    null,
    [Validators.required, Validators.minLength(6), passwordMatchValidator(this.password.value)]
  ]

Тогда текущее значение this.password.value - это то, что передается в ваш валидатор - вероятно, это просто ноль или пустая строка. И это единственное, с чем можно будет сравнить повторный пароль. То, что позже будет введено в поле исходного пароля, отслеживаться не будет.

Вам нужен валидатор, который находится в области действия вашего экземпляра SignUpFormComponent, который может сравниваться с полем исходного пароля при его изменении.

Обновление:

То, что я думаю, должно работать, примерно так: 

constructor(
    private fb: FormBuilder
  ) {
    this.signUpForm = this.fb.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, [Validators.required, Validators.minLength(6)]],
      passwordRepeat: [
        null,
        [Validators.required, Validators.minLength(6), passwordMatchValidator(this)]
      ]
    });
  }

static passwordMatchValidator(comp: SignUpFormComponent): ValidatorFn {
    return (control: AbstractControl): ValidationErrors => {
      return comp.password.value !== control.value ? { mismatch: true } : null;
    };
  }
...