Пользовательский механизм проверки соответствия паролей не работает в angular5

Question

Я использую пользовательский валидатор для сопоставления пароля в моем компоненте.

Вот мое объявление формы component.ts

this.addUserForm = new FormGroup({
  firstname: new FormControl('', [Validators.required]),
  lastname: new FormControl('', [Validators.required]),
  city: new FormControl(),
  address: new FormControl(),
  email: new FormControl('', [Validators.required, Validators.email]),
  password: new FormControl('', [Validators.required, Validators.minLength(6)]),
  confirm_password: new FormControl('', [Validators.required, ConfirmPasswordValidator.MatchPassword]),
  role: new FormControl('', [Validators.required]),
  phone: new FormControl(),
  companyCode: new FormControl(this.local_storage.getCurrentUser().companyCode, [Validators.required])
});

Вот мое custom.validator.ts

import { AbstractControl } from '@angular/forms';

export class ConfirmPasswordValidator {
static MatchPassword(control: AbstractControl) {
    let password = control.get('password').value;
    let confirmPassword = control.get('confirm_password').value;

    if (password != confirmPassword) {
        console.log('false')
        control.get('confirmPassword').setErrors({ ConfirmPassword: true });
    } else {
        return null
    }
  }
 }

Вот моя входная часть component.html

 <label class="col-form-label">Password</label>
        <div class="form-group row">
          <div class="col-sm-10">
            <input type="password" class="form-control" formControlName="password">
            <div class="alert alert-danger" *ngIf="addUserForm.get('password').touched && addUserForm.get('password').invalid && addUserForm.get('password').errors.required">
              Password is required
            </div>
            <div class="alert alert-danger" *ngIf="addUserForm.get('password').touched && addUserForm.get('password').invalid && addUserForm.get('password').errors.minlength && !addUserForm.get('password').errors.required">
              Password length must be greater than 6
            </div>
          </div>
        </div>
       <div class="alert alert-danger" *ngIf="addUserForm.get('confirm_password').touched && addUserForm.get('confirm_password').invalid && addUserForm.get('confirm_password').errors.ConfirmPassword">
              Password deesn't match
          </div>

Но он выдает эту ошибку property 'value' of null TypeError: Cannot read property 'value' of null at ConfirmPasswordValidator.MatchPassword (user.validator.ts:5) Структура и каталог проекта очень сложны и огромны, поэтому не могут совместно использовать весь компонент и HTML-код.Что не так в моем коде?

Answer 1

Валидатор группы форм

Обновление MatchPassword для работы на уровне группы форм, так что вам не нужно добавлять валидатор обычного режима в confirmPassword control

static MatchPassword(control: AbstractControl) {
    let password = control.get('password').value;
    let confirmPassword = control.get('confirm_password').value;

    if (password != confirmPassword) {
      return { ConfirmPassword: true };
    } else {
        return null
    }
  }

и добавьте этот валидатор для опций валидаторов formGroup

{ validators: ConfirmPasswordValidator.MatchPassword }

демонстрация stackblitz ??

Валидатор управления формой

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

this.form = fb.group({
  password: [null, [Validators.required]],
  confirm_password: [null, [Validators.required, MatchPassword]]
})

Валидатор MatchPassword

function MatchPassword(control: AbstractControl) {
  let parent = control.parent
  if (parent) {
    let password = parent.get('password').value;
    let confirmPassword = control.value;

    if (password != confirmPassword) {
      return { ConfirmPassword: true };
    } else {
      return null
    }
  } else {
    return null;
  }

демонстрация стекаблиц ??

Answer 2

Есть несколько проблем с вашим кодом.

Первое: вы получаете дочерний элемент управления с именем 'password' и другой дочерний элемент управления формы с именем 'verifyPassword' от элемента управления, переданного валидатору.Поэтому валидатор должен проверять FormGroup, содержащий эти два элемента управления формой.Но вы не устанавливаете этот валидатор в группе форм.Вы устанавливаете это на элемент управления формы confirmPassword.Вам необходимо установить этот валидатор в группе форм вложений.

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

static MatchPassword(control: AbstractControl) {
  const password = control.get('password').value;
  const confirmPassword = control.get('confirm_password').value;

  if (password != confirmPassword) {
    return { ConfirmPassword: true };
  } else {
    return null;
  }
}

Или записан более кратко:

static MatchPassword(control: AbstractControl) {
  return control.get('password').value != control.get('confirm_password').value ? { ConfirmPassword: true } : null;
}