如何显示角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);
       });
   }
}

密码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
    )
  });
}

密码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变得falsy，因为它不再是原始的，所以整个DIV不会显示。否则，你的代码看起来很好！所以，你的包装的div应该只是看起来像：

<div *ngIf="oldPassword.touched">

StackBlitz