0

Есть попытка создания собственного валидатора для формы в Angular 5 :

form: FormGroup; 

ngOnInit() {
  this.form = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(5)]],
    password: ['', [Validators.required, Validators.minLength(5)]],
    dpassword: ['', [Validators.required, this.validateMatchPasswords.bind(this)]],
    email: ['', [Validators.required, Validators.email]]
  });
}

validateMatchPasswords(control: FormControl) {
  return {
    error: this.form.get('password') === this.form.get('dpassword')
  };
}

Идея в том что валидатор должен проверять при регитрации, что основное поле пароля и его повторение одинаковые. Но почему-то падает ошибка что не может найти метод get() у объекта this.form и вообще this.form получается undefined, хотя я сделал this.validateMatchPasswords.bind(this).

ERROR TypeError: Cannot read property 'get' of undefined
    at RegistrationComponent.validateMatchPasswords (registration.component.ts:32)
    at eval (forms.js:759)
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:759)
    at FormControl.eval [as validator] (forms.js:711)
    at FormControl.AbstractControl._runValidator (forms.js:3433)
    at FormControl.AbstractControl.updateValueAndValidity (forms.js:3387)
    at new FormControl (forms.js:3905)
    at FormBuilder.control (forms.js:7899)
    at FormBuilder._createControl (forms.js:7965)

Подскажите пожалуйста, почему так происходит, и как это можно поправить?

1
  • Возможно это происходит потому что validateMatchPasswords выполнятся до того, как происходит создание формы в ngOnInit. Попробуйте перенести создание формы в конструктор. 27 мар 2018 в 5:13

1 ответ 1

1

Валидатор вызывается до создания объекта FormGroup, поэтому и не может обратиться к property 'get' of undefined. Задача решается так:

  ngOnInit() {
    this.form = this.fb.group({
      username: ...,
      passwords: new FormGroup({
        password: new FormControl('', Validators.required),
        repeatPassword: new FormControl('', Validators.required)
      }, this.passwordMatchValidator),
     email: ...
    })
  }

  passwordMatchValidator(g: FormGroup) {
    return g.get('password').value === g.get('repeatPassword').value
       ? null : {'mismatch': true};
  }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.