mat-form-field - красный, хотя ошибок нет

Question

У меня есть mat-form-field, который используется для подтверждения пароля пользователя:

<mat-form-field>
  <input matInput required placeholder="Gentag password" [type]="hidePassword ? 'password' : 'text'"
    formControlName="confirmPassword" [errorStateMatcher]="passwordMatcher">
  <mat-icon matSuffix (click)="hidePassword = !hidePassword">{{hidePassword ? 'visibility_off' : 'visibility'}}
  </mat-icon>
  <mat-error *ngIf="registerForm.hasError('mismatch') && !registerForm.hasError('required', 'confirmPassword')">De to passwords matcher ikke</mat-error>
  <mat-error *ngIf="registerForm.hasError('required', 'confirmPassword')">Bekræft venligst passwordet</mat-error>
</mat-form-field>

Вот то errorStateMatcher, которое я использую:

class PasswordErrorStateMathcer implements ErrorStateMatcher {
  isErrorState(control: FormControl, form: import("@angular/forms").FormGroupDirective | import("@angular/forms").NgForm): boolean {
    return !!((control && control.touched && control.parent && control.parent.invalid) || (form.submitted));
  }
}

Дваmat-errors работают как положено, но когда ошибки исчезают, поле остается красным, как будто оно все еще имеет ошибку:

И здесьВы можете увидеть объект, напечатанный в консоли, где он говорит, что он действителен:

Вот как я создал FormGroup:

this.registerForm = this.builder.group({
      firstName: ["", [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
      lastName: ["", [Validators.required, Validators.minLength(2), Validators.maxLength(20)]],
      email: ["", [Validators.required, Validators.pattern("[a-zA-Z0-9]{1,}([._-]?[a-zA-Z0-9]{1,})*@[a-zA-Z]{2,}([.-]{1}[a-zA-Z0-9]{1,})*[.]{1}[a-zA-Z]{2,}"),
      Validators.maxLength(40)]],
      checkboxGroup: new FormGroup({
        adminCheckbox: new FormControl(false),
        proCheckbox: new FormControl(false),
        researcherCheckbox: new FormControl(false),
        datamanagerCheckbox: new FormControl(false),
      }, this.checkboxValidator),
      password: ["", [Validators.minLength(6), Validators.maxLength(20)]],
      confirmPassword: [""]}, { validator: this.confirmPasswordValidator, });
  }

А вот мой confirmPasswordValidator:

  confirmPasswordValidator(group: FormGroup) {
    let pass = group.controls.password.value;
    let confirmPass = group.controls.confirmPassword.value;

    return pass === confirmPass ? null : { mismatch: true };
  }

Почему он остается красным?

Answer 1

ErrorStateMatcher проверяет статус родительской формы,

return !!((control && control.touched && control.parent && control.parent.invalid) || (form.submitted));

Убедитесь, что родительская форма действительна или отправлена ​​иначе.

Чтобы удалить ошибки после ввода действительных данных, изменитеваша функция ErrorStateMatcher

 return !!((control && control.touched && control.invalid) || (form.submitted));