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

Question

Поэтому я создал специальный валидатор для проверки соответствия полей "Новый пароль" и "Подтверждение пароля". На уровне компонентов это прекрасно работает. Сообщение об ошибке отображается только тогда, когда два входа не совпадают.

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

Что мне здесь не хватает?

Пользовательский код валидатора выглядит следующим образом:

import {FormGroup, ValidationErrors, ValidatorFn} from "@angular/forms";

export const matchingInputsValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  let pass = control.get('NewPassword').value;
  let confirmPass = control.get('ConfirmPassword').value;
  return pass === confirmPass ? { matchingInputs: true } : { matchingInputs: false };
};

Я импортирую пользовательский валидатор в свой компонент и объявляю свои элементы управления формой в компоненте следующим образом:

expiredPasswordForm: FormGroup;
oldPassword = new FormControl('', Validators.compose([Validators.required, Validators.minLength(4)]));
newPassword = new FormControl('', Validators.compose([Validators.required, Validators.minLength(4)]));
confirmPassword = new FormControl('', Validators.compose([Validators.required, Validators.minLength(4)]));

И в моей ловушке жизненного цикла ngOnInit() я создаю свою группу форм следующим образом:

this.expiredPasswordForm = this.fb.group({
      'OldPassword': this.oldPassword,
      'NewPassword': this.newPassword,
      'ConfirmPassword': this.confirmPassword
    }, { validator: matchingInputsValidator});

И мой HTML для моей формы выглядит так:

<form [formGroup]="expiredPasswordForm" ngNoForm action="" method="post" class="form-horizontal">

        <label for="oldPassword" class="col-sm-4 col-md-6 col-lg-6 col-xl-6 control-label" translate>Old Password</label>
        <input [formControl]="oldPassword" type="password" class="form-control" id="oldPassword"
               placeholder="Old Password" name="OldPassword" [ngClass]="{'is-invalid':oldPassword.invalid && (oldPassword.dirty || oldPassword.touched)}">
        <div *ngIf="oldPassword.invalid && (oldPassword.dirty || oldPassword.touched)" class="invalid-feedback">
          <span *ngIf="oldPassword.errors.required">Old Password is required</span>
        </div>

        <label for="newPassword" class="col-sm-4 col-md-6 col-lg-6 col-xl-6 control-label mt-2" translate>New Password</label>
        <input [formControl]="newPassword" type="password" class="form-control" id="newPassword"
               placeholder="New Password" name="NewPassword" [ngClass]="{'is-invalid':newPassword.invalid && (newPassword.dirty || newPassword.touched)}">
        <div *ngIf="newPassword.invalid && (newPassword.dirty || newPassword.touched)" class="invalid-feedback">
          <span *ngIf="newPassword.errors.required">A new password is required</span>
        </div>

        <label for="confirmPassword" class="col-sm-4 col-md-6 col-lg-6 col-xl-6 control-label mt-2" translate>Confirm Password</label>
        <input [formControl]="confirmPassword" type="password" class="form-control" id="confirmPassword"
               placeholder="Confirm Password" name="ConfirmPassword" [ngClass]="{'is-invalid':confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)}">
        <div *ngIf="confirmPassword.invalid && (confirmPassword.dirty || confirmPassword.touched)" class="invalid-feedback">
          <span *ngIf="confirmPassword.errors.required">You must confirm your new password!</span>
        </div>
        <div *ngIf="!expiredPasswordForm.errors?.matchingInputs">
          <span class="form-error-message">Passwords do not match!</span>
        </div>

        <div class="text-center">
          <button [disabled]="!expiredPasswordForm.valid" type="submit" class="btn btn-primary mt-4 mb-2">Update Password</button>
        </div>

      </form>

Я надеюсь, что это достаточно информации. Почему это работает на уровне компонентов, а не на уровне формы? Заранее спасибо!

Answer 1

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

Вы могли бы понять это, потому что это единственный валидатор, который установлен на FormGroup уровень, а не на FormControl

Объект, возвращаемый валидатором, имеет тип ValidationErrors, это объект, содержащий пары ключей / значений. Для каждой пары ключ представляет имя ошибки, а значение представляет связанные данные (например, детали для отображения).

Поэтому, если вы хотите, чтобы ваш валидатор не возвращал никаких ошибок, вы должны вообще ничего не возвращать:

import {FormGroup, ValidationErrors, ValidatorFn} from "@angular/forms";

export const matchingInputsValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
   let pass = control.get('NewPassword').value;
   let confirmPass = control.get('ConfirmPassword').value;
   return pass === confirmPass ? null : { matchingInputs: false };
}