angular - 在 Angular 中显示 formControlName 的验证消息

Question

我有以下 Angular 注册表单:

<form [formGroup]="signUp" (ngSubmit)="onSubmit()">
  <input id="email" type="text" formControlName="email" placeholder="Email">
  <input id="email" type="password" formControlName="password" placeholder="Password">
  <button type="submit" [disabled]="!enquiry.valid">Sign Up</button>
</form>

在我的组件代码中，我将值提交给 API。

如果出现问题，API 会返回一个错误列表，我会将其推送到我的表单错误中。

如何为每个输入显示其错误消息？

我不需要设置任何消息，因为 API 已经返回了正确的消息。

Answer 1

要按照建议在每次输入的基础上执行此操作，您需要 API 返回具有相应 FormControl 名称的错误，例如；

[
   { name: 'email', errorMessage: 'Email already exists' },
   { name: 'password', errorMessage: 'Password is not strong enough' }
]

一旦返回，就可以迭代错误数组并使用 setErrors() 应用于每个表单控件，例如

for (let error in errorResponse) {
    this.signUp.get(error.name).setErrors({ error: error.errorMessage });
}

此时，您只需要显示每个输入的错误消息。

<p *ngIf="signUp.get('email').error">{{signUp.get('email')?.errors?.error}}</p>

Stackblitz 示例:https://stackblitz.com/edit/angular-pqhdul