Пароли должны соответствовать реактивным формам в Angular

Question

Я пробовал несколько учебных пособий для проверки паролей с помощью реактивных форм, но все еще не могу завершить свою задачу.Включая чтение этого поста angular 8: Реактивный пароль совпадения с формой , но не работает для меня.

Это мой HTML, и я думаю, что это хорошо:

<div class="input-group form-group">
            <div class="input-group-prepend">
              <span class="input-group-text"><i class="fas fa-key"></i></span>
            </div>
            <input #password formControlName="confirmPassword" type="password" class="form-control"
              placeholder="Confirm *">
          </div>
          <div class="alert alert-danger" role="alert"
            *ngIf="!!(this.registerFormGroup.controls.confirmPassword.errors.required && this.registerFormGroup.controls.confirmPassword.dirty)">Confirm Password is required
          </div>
          <div class="alert alert-danger" role="alert"
            *ngIf="!!(this.registerFormGroup.controls.confirmPassword.errors.mustMatch && this.registerFormGroup.controls.confirmPassword.dirty)">Passwords must match
          </div>

ЭтоМой пользовательский валидатор:

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

export function MustMatch(controlName: string, matchingControlName: string) {
    return (formGroup: FormGroup) => {
        const control = formGroup.controls[controlName];
        const matchingControl = formGroup.controls[matchingControlName];

        if (matchingControl.errors && !matchingControl.errors.mustMatch) {
            // return if another validator has already found an error on the matchingControl
            return;
        }

        // set error on matchingControl if validation fails
        if (control.value !== matchingControl.value) {
            matchingControl.setErrors({ mustMatch: true });
        } else {
            matchingControl.setErrors(null);
        }
    };
}

Это моя RegisterFormGroup:

registerFormGroup(formGroup: FormGroup) {
    return formGroup = this.formBuilder.group({
      confirmPassword: [
        '',
        [
          Validators.required,
        ]
      ],
    }, {
        validator: MustMatch('password', 'confirmPassword')
      });
  }

При вводе другого пароля я получаю сообщение об ошибке.Но при вводе правильных паролей в консоли появляется сообщение об ошибке:

RegisterComponent.html:56 ERROR TypeError: Cannot read property 'required' of null
    at Object.eval [as updateDirectives] (RegisterComponent.html:60)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23911)
    at checkAndUpdateView (core.js:23307)
    at callViewAction (core.js:23548)
    at execComponentViewsAction (core.js:23490)
    at checkAndUpdateView (core.js:23313)
    at callViewAction (core.js:23548)
    at execEmbeddedViewsAction (core.js:23511)
    at checkAndUpdateView (core.js:23308)
    at callViewAction (core.js:23548)

Это в строке: 60

*ngIf="!!(this.registerFormGroup.controls.confirmPassword.errors.required && this.registerFormGroup.controls.confirmPassword.dirty)">Confirm Password is required

Я исправляю другие ошибки, но не могу их устранить.Скорее всего, это маленькая ошибка, которую я не вижу ...

Answer 1

используйте ниже код:

<div *ngIf="registerFormGroup.get('confirmPassword').invalid && registerFormGroup.get('confirmPassword').dirty" class="text-danger">
  <div *ngIf="registerFormGroup.get('confirmPassword').hasError('required')">
    *
  </div>
</div>