在 Angular 中显示 formControlName 的验证消息答案

【问题标题】：Show validation message for formControlName in Angular在 Angular 中显示 formControlName 的验证消息
【发布时间】：2019-02-22 11:48:31
【问题描述】：

我有以下 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 已经返回了正确的消息。

【问题讨论】：

您想将消息显示在组件旁边还是全部显示在同一位置（例如摘要面板）？
我需要在该输入的每个输入之后显示错误消息。
你能展示一个 API 响应错误的例子吗？

标签： angular angular6 angular7

【解决方案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

【讨论】：

我认为这不是一个好的解决方案，因为每次检查有效性时它都会搜索错误消息数组 - 搜索与密钥对应的错误消息。我认为键控对象访问会节省性能，例如错误[“电子邮件”]？
@MartinEckleben - 也许，我这样做的原因是因为 OP 提到了一个错误列表，而不是一个键控对象。它也只迭代数组一次，当 API 返回时，而不是当 Angular 检查有效性时——此时，错误已经设置，Angular 从 FormGroups 错误对象中检索它们。即使我们使用键控对象，为了让 FormGroup 像我一样管理错误，我们仍然需要迭代对象键以设置适当的 FormControl 错误。

【解决方案2】：

您可以对反应式表单使用验证错误 (https://angular.io/guide/form-validation)。我认为您可以设置自定义表单验证器功能（https://angular.io/guide/form-validation#custom-validators）。希望这会有所帮助。

【讨论】：

【解决方案3】：

标记可能看起来像

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

格式化 API 响应以返回所需的 JSON，然后将其存储在公共属性中。

【讨论】：

这样做会显示错误，是的，但是，它不会使表单无效，因为您没有将它们应用于FormGroup .因此，带有 api 错误的表单仍然会被读取为有效，即使它不是。
既然你知道有错误，你可以将表单设置为无效...
是的，你可以，但这违背了反应式表单的目的。如果您可以让 Angular 为您工作，那么手动将表单设置为无效是没有意义的。此外，使用我建议的答案，您可以获得开箱即用的每个输入有效性。
为什么要滥用机制，如果你也可以使用它？