Angular 17提交表单时如何展示后端返回的必填字段验证错误

我有多个包含后端标记为required字段的表单（如firstName、lastName等）。提交表单时：

• 未填写firstName，后端返回如下错误：

{
    "status": "failed",
    "error": {
        "message": "Invalid request data. Please review the request and try again.",
        "code": [
            {
                "message": "firstName is required",
                "code": "any.required"
            }
        ]
    }
}

• 填写firstName但留空lastName，后端返回"lastName is required"错误。

现有代码：

HTML代码 #

<input type="text" class="form-control" [(ngModel)]="registration.firstName">
<input type="text" class="form-control" [(ngModel)]="registration.lastName">
<button type="button" class="btn btn-success" (click)="createRegistration(registration)">Submit</button>

TypeScript代码 #

createRegistration(registration:StudentRegistration){
    this.coreService.addRegistration(registration).subscribe({
      next: (res: any) => {
        this.registration = res.data || {} as StudentRegistration;
        this.opd.registration = res.data._id;
        this.createOpdStudent()
      },
      error: (err) => {
        console.log(err);
      }
    })
}

需求：点击Submit按钮后，在页面上展示后端返回的错误信息（如<p>firstName is required</p>），不想用前端逐个字段验证的方式（因为表单有上百个字段，工作量太大）。

1. 组件中添加错误存储变量 #

在组件类里定义数组，用于存储后端返回的错误消息：

formErrors: string[] = [];

2. 解析后端错误并赋值 #

修改createRegistration方法的error回调，从后端响应中提取错误消息并存入数组，同时每次提交前清空旧错误：

createRegistration(registration:StudentRegistration){
    // 提交前清空历史错误
    this.formErrors = [];
    this.coreService.addRegistration(registration).subscribe({
      next: (res: any) => {
        this.registration = res.data || {} as StudentRegistration;
        this.opd.registration = res.data._id;
        this.createOpdStudent();
        // 成功提交后清空错误
        this.formErrors = [];
      },
      error: (err) => {
        // 按后端返回结构解析错误
        if (err.error?.code && Array.isArray(err.error.code)) {
          this.formErrors = err.error.code.map(item => item.message);
        } else {
          // 兼容其他错误格式
          this.formErrors = [err.error?.message || '提交失败，请重试'];
        }
      }
    })
}

3. 在HTML中展示错误 #

在表单下方添加错误展示区域，用*ngFor循环输出所有错误：

<!-- 错误展示区域 -->
<div class="text-danger" *ngIf="formErrors.length > 0">
  <p *ngFor="let error of formErrors">{{ error }}</p>
</div>

<input type="text" class="form-control" [(ngModel)]="registration.firstName">
<input type="text" class="form-control" [(ngModel)]="registration.lastName">
<button type="button" class="btn btn-success" (click)="createRegistration(registration)">Submit</button>

（可选）给对应字段标记错误样式 #

如果需要给错误字段添加样式并在字段旁展示错误，可以按字段名存储错误：

• 组件中修改变量：

fieldErrors: { [key: string]: string } = {};

• 错误回调中修改解析逻辑：

error: (err) => {
  this.fieldErrors = {};
  if (err.error?.code && Array.isArray(err.error.code)) {
    err.error.code.forEach(item => {
      // 从错误消息中提取字段名（如"firstName is required"拆分出firstName）
      const fieldName = item.message.split(' ')[0];
      this.fieldErrors[fieldName] = item.message;
    });
  }
}

• HTML中给输入框绑定错误样式并展示字段专属错误：

<div class="form-group">
  <input 
    type="text" 
    class="form-control" 
    [class.is-invalid]="fieldErrors['firstName']"
    [(ngModel)]="registration.firstName"
  >
  <div class="invalid-feedback" *ngIf="fieldErrors['firstName']">
    {{ fieldErrors['firstName'] }}
  </div>
</div>

<div class="form-group">
  <input 
    type="text" 
    class="form-control" 
    [class.is-invalid]="fieldErrors['lastName']"
    [(ngModel)]="registration.lastName"
  >
  <div class="invalid-feedback" *ngIf="fieldErrors['lastName']">
    {{ fieldErrors['lastName'] }}
  </div>
</div>

<button type="button" class="btn btn-success" (click)="createRegistration(registration)">Submit</button>

内容的提问来源于stack exchange，提问作者Elaine Byene