如何在Ant Design表单中展示后端返回的校验错误信息

核心是利用Ant Design Form提供的setFields方法，将后端返回的字段级错误映射到对应表单字段下方，和内置校验错误样式保持一致。以下是具体实现步骤：

1. 解析后端错误结构 #

先明确后端返回的错误格式，假设接口返回的字段错误结构如下（可根据实际接口调整）：

{
  "body": {
    "errors": {
      "background": "背景图格式不符合要求",
      "title": "标题不能为空",
      "content": "内容长度不能少于10个字符"
    },
    "message": "提交失败，请检查表单内容"
  }
}

2. 转换为Form所需的错误格式 #

把后端返回的键值对格式错误，转换成setFields方法要求的数组结构，每个元素包含字段名name和错误信息数组errors。

3. 完整实现代码 #

替换你原有的onError逻辑，改成动态适配多字段错误的版本：

onError(err: any) {
  console.log(err);
  const fieldErrors = err?.body?.errors;
  if (fieldErrors) {
    // 转换为Form可识别的错误数组
    const formErrorItems = Object.entries(fieldErrors).map(([fieldName, errorMsg]) => ({
      name: fieldName,
      errors: [errorMsg as string]
    }));
    // 将错误设置到对应表单字段
    form.setFields(formErrorItems);
  }
  // 全局错误提示（可选，用于展示非字段级的全局错误）
  const globalErrorMessage = err?.body?.message;
  if (globalErrorMessage) {
    messageApi.error(globalErrorMessage);
  }
}

注意事项 #

• 确保表单字段的name属性和后端返回的字段名完全匹配，否则无法正确显示错误。
• 如果后端返回单个字段对应多个错误信息（数组格式），直接将该数组赋值给errors即可，无需额外转换。
• 若使用Ant Design Vue，逻辑完全一致，仅需保证表单字段的prop属性和后端字段名对应，setFields方法用法相同。

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