Question

我有以下Angular SignUp表单：

<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

Answer 2

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

Answer 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，然后将其存储在公共属性中。

在Angular中显示formControlName的验证消息

3 个答案: