彻底解决 Ant Design Pro 表单校验提示重复的终极方案
项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro 你是否在使用 Ant Design Pro 开发表单时，遇到过校验提示重复出现的问题？当使用 renderFormItem 自定义表单项并调用 defaultRender 时，表单验证错误提示可能会莫名其妙地重复显示，既影响用户体验，又难以定位问题根源。本文将从实际代码出发，带你一步分析问题原因并提供完美解决方案，让你彻底摆脱这一困扰。
读完本文你将学到：
- 校验提示重复的根本原因分析
- 两种实用解决方案的代码实现
- 如何在项目中正确使用
renderFormItem和defaultRender
问题场景重现
在 Ant Design Pro 项目中，当我们需要自定义表单控件渲染时，通常会使用 renderFormItem 属性来自定义表单项。以下是一个典型的使用场景，位于 src/pages/table-list/index.tsx 文件中：
{
title: (
<FormattedMessage
id="pages.searchTable.titleUpdatedAt"
defaultMessage="Last scheduled time"
/>
),
sorter: true,
dataIndex: 'updatedAt',
valueType: 'dateTime',
renderFormItem: (item, { defaultRender, ...rest }, form) => {
const status = form.getFieldValue('status');
if (`${status}` === '0') {
return false;
}
if (`${status}` === '3') {
return (
<Input
{...rest}
placeholder={intl.formatMessage({
id: 'pages.searchTable.exception',
defaultMessage: 'Please enter the reason for the exception!',
})}
/>
);
}
return defaultRender(item);
},
}
当表单项验证失败时，可能会出现如下重复的错误提示：
图：表单校验提示重复效果示意图
问题根源分析
通过分析 src/pages/table-list/index.tsx 中的代码实现，我们发现问题主要出在两个方面：
1. 验证规则重复定义
当同时在 ProForm 组件上定义 rules 属性和通过 renderFormItem 自定义表单控件时，可能会导致验证规则被重复应用。特别是当 defaultRender 内部已经包含了验证逻辑时，外部再添加验证规则就会造成重复校验。
2. defaultRender 调用方式不当
在上述代码中，defaultRender(item) 只传递了 item 参数，而没有传递 rest 参数，这可能导致 defaultRender 无法正确接收和处理表单验证相关的属性，从而引发异常的验证行为。
解决方案
针对以上问题，我们提供两种实用的解决方案：
方案一：正确传递参数给 defaultRender
修改 renderFormItem 方法，将 rest 参数正确传递给 defaultRender：
renderFormItem: (item, { defaultRender, ...rest }, form) => {
const status = form.getFieldValue('status');
if (`${status}` === '0') {
return false;
}
if (`${status}` === '3') {
return (
<Input
{...rest}
placeholder={intl.formatMessage({
id: 'pages.searchTable.exception',
defaultMessage: 'Please enter the reason for the exception!',
})}
/>
);
}
// 正确传递所有参数给 defaultRender
return defaultRender(item, rest);
},
方案二：统一管理验证规则
将验证规则集中定义，避免重复定义。可以在表单组件的 rules 属性中统一设置验证规则，而不是在 renderFormItem 中单独处理：
{
title: (
<FormattedMessage
id="pages.searchTable.titleUpdatedAt"
defaultMessage="Last scheduled time"
/>
),
sorter: true,
dataIndex: 'updatedAt',
valueType: 'dateTime',
rules: [
{
required: true,
message: intl.formatMessage({
id: 'pages.searchTable.updatedAtRequired',
defaultMessage: 'Last scheduled time is required',
}),
},
],
renderFormItem: (item, { defaultRender, ...rest }, form) => {
const status = form.getFieldValue('status');
if (`${status}` === '0') {
return false;
}
if (`${status}` === '3') {
return (
<Input
{...rest}
placeholder={intl.formatMessage({
id: 'pages.searchTable.exception',
defaultMessage: 'Please enter the reason for the exception!',
})}
/>
);
}
return defaultRender(item, rest);
},
}
验证与测试
修改完成后，建议进行以下测试以确保问题解决：
- 提交空表单，检查是否只显示一次验证提示
- 输入无效数据，检查验证提示是否正确显示
- 切换表单状态（如上述代码中的
status字段），检查不同状态下的验证行为是否正常
总结
通过本文的分析和解决方案，我们了解了 Ant Design Pro 中 renderFormItem 使用 defaultRender 时校验提示重复的问题根源，并掌握了两种有效的解决方法。关键在于正确传递参数给 defaultRender 以及避免验证规则的重复定义。
官方文档中关于表单验证的更多内容，可以参考 src/services/ant-design-pro/api.ts 中的相关接口定义，以及 src/pages/table-list/components/CreateForm.tsx 和 src/pages/table-list/components/UpdateForm.tsx 中的表单实现。
希望本文能够帮助你解决表单验证相关的问题，提升 Ant Design Pro 项目的开发效率和用户体验！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
