Как отобразить ошибки пользовательской проверки в Angular 7

Question

Я хочу отобразить красную рамку вокруг поля ввода формы и сообщения Password is invalid и когда пользователь вводит пароль, который не соответствует тому, для которого был установлен пароль.

Я вижу красную рамку, указывающую на ошибку, когда я набираю что-то, отличное от установленного пароля, но сообщение не отображается.Я не смог понять, в чем проблема, потратив несколько часов на просмотр кода, поэтому будьте добры, посмотрите на мой код и укажите мне на ошибку

password.validators.ts

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

export class PasswordValidators {
    static matchOldPassword(
       control: AbstractControl
       ): Promise<ValidationErrors | null> {
       return new Promise((resolve, reject) => {
           setTimeout(() => {
           if (control.value !== "1234") resolve({ matchOldPassword: true });
           else resolve(null);
           }, 2000);
       });
   }
}

password-change.component.ts

import { PasswordValidators } from "./password.validator";
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { Component } from "@angular/core";

@Component({
  selector: "password-change",
  templateUrl: "./password-change.component.html",
  styleUrls: ["./password-change.component.css"]
})
export class PasswordChangeComponent {
  form = new FormGroup({
    oldPassword: new FormControl(
    "",
    Validators.required,
    PasswordValidators.matchOldPassword
    )
  });
}

password-change.component.html

<form [formGroup]="form">
<div class="form-group">
<label for="oldPassword" class="font-weight-bold">Old Password</label>
<input
  formControlName="oldPassword"
  type="password"
  id="oldPassword"
  class="form-control"
/>
<div
  *ngIf="oldPassword.touched && oldPassword.pristine"
  class="text-danger"
>
  <div *ngIf="oldPassword.errors.required">Old password is required.</div>
  <div *ngIf="oldPassword.errors.matchOldPassword">
    Old password is not valid.
  </div>
</div>
</div>
</form>

Answer 1

Удалите oldPassword.pristine из вашей упаковки div.Ваш if становится ложным после того, как поле было изменено, так как оно больше не является нетронутым, поэтому весь div не будет отображаться.Иначе, ваш код выглядит хорошо!Поэтому ваш упаковочный div должен выглядеть так:

<div *ngIf="oldPassword.touched">

StackBlitz