Angular5调用.NET API 如何展示后端模型验证错误信息

第一步：修改Angular服务，捕获并解析API返回的错误 #

首先得在服务的HTTP请求里加上错误处理逻辑，把.NET API返回的ModelState错误信息提取出来。Angular5推荐用HttpClient模块，我们可以借助catchError操作符来捕获并处理400错误：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class FormService {
  constructor(private http: HttpClient) {}

  submitForm(formObj: FormDto): Observable<any> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json; charset=utf-8'
    });

    return this.http.post("/api/Forms", formObj, { headers })
      .pipe(
        catchError((error: HttpErrorResponse) => {
          // 专门处理400 Bad Request的情况
          if (error.status === 400 && error.error) {
            // error.error就是.NET返回的ModelState对象，直接抛出给组件处理
            return throwError(() => error.error);
          }
          // 其他错误类型的默认提示
          return throwError(() => new Error('提交失败，请稍后重试'));
        })
      );
  }
}

小提示：我去掉了手动JSON.stringify(formObj)，因为HttpClient会自动帮你序列化JSON对象；如果你的项目还在使用旧版Http模块，把catchError换成.catch()逻辑是一样的。

第二步：在组件中处理错误并绑定到表单控件 #

假设你用的是Angular响应式表单（模板驱动表单逻辑类似），订阅请求时捕获错误，把错误信息映射到对应表单控件上：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { FormService } from './form.service';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent implements OnInit {
  form: FormGroup;
  // 存储无法匹配到控件的全局错误
  globalErrors: string[] = [];

  constructor(private fb: FormBuilder, private formService: FormService) {}

  ngOnInit() {
    // 初始化示例表单，包含name和email字段
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  submitForm() {
    // 先做客户端验证，避免无效请求
    if (this.form.invalid) {
      return;
    }

    this.formService.submitForm(this.form.value)
      .subscribe({
        next: (res) => {
          // 提交成功的逻辑，比如提示成功或跳转页面
          console.log('提交成功', res);
        },
        error: (error) => {
          // 清空之前的错误记录
          this.globalErrors = [];
          // 遍历ModelState里的所有错误
          Object.keys(error).forEach(key => {
            const formControl = this.form.get(key);
            if (formControl) {
              // 给对应控件设置服务端错误，这里取第一个错误信息（也可以拼接所有错误）
              formControl.setErrors({ serverError: error[key][0] });
            } else {
              // 没有匹配到控件的错误，加入全局错误列表
              this.globalErrors.push(...error[key]);
            }
          });
        }
      });
  }
}

第三步：在视图模板中展示错误信息 #

最后在模板里为每个控件展示服务端返回的错误，同时处理全局错误：

<form [formGroup]="form" (ngSubmit)="submitForm()">
  <!-- 姓名字段 -->
  <div class="form-group">
    <label>姓名：</label>
    <input formControlName="name" type="text" class="form-control">
    <!-- 服务端错误提示 -->
    <div *ngIf="form.get('name').hasError('serverError')" class="text-danger">
      {{ form.get('name').getError('serverError') }}
    </div>
    <!-- 客户端必填错误提示 -->
    <div *ngIf="form.get('name').hasError('required') && form.get('name').touched" class="text-danger">
      姓名不能为空
    </div>
  </div>

  <!-- 邮箱字段 -->
  <div class="form-group">
    <label>邮箱：</label>
    <input formControlName="email" type="email" class="form-control">
    <div *ngIf="form.get('email').hasError('serverError')" class="text-danger">
      {{ form.get('email').getError('serverError') }}
    </div>
    <div *ngIf="form.get('email').hasError('required') && form.get('email').touched" class="text-danger">
      邮箱不能为空
    </div>
    <div *ngIf="form.get('email').hasError('email') && form.get('email').touched" class="text-danger">
      请输入有效的邮箱格式
    </div>
  </div>

  <!-- 全局错误展示 -->
  <div *ngIf="globalErrors.length > 0" class="alert alert-danger">
    <ul>
      <li *ngFor="let err of globalErrors">{{ err }}</li>
    </ul>
  </div>

  <button type="submit" [disabled]="form.invalid" class="btn btn-primary">提交</button>
</form>

关键注意点 #

• 字段名匹配：确保Angular的FormDto字段名和.NET后端模型的字段名完全一致，这样才能正确映射到对应的表单控件。
• 错误结构兼容：默认BadRequest(ModelState)返回的是Dictionary<string, string[]>结构，如果你的API返回格式有调整，需要对应修改解析逻辑。
• 前后端验证结合：先做客户端验证减少无效请求，再处理服务端的业务规则类验证错误（比如唯一值校验）。

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