虚拟化列表和表单校验怎么解决

[Henry-G-H-Huang]

目前我们项目里面使用了Form.List来渲染了一个大概会有20-50个表单项的卡片列表 发现目前这样的数量会导致页面卡顿
因此我们打算使用virtualList来解决这一问题 但是这样同时带来的问题就是form的validator是只有当item渲染出来的时候 才能正常的触发校验。 如果把validator自己拆出来实现不依赖Form的Rule属性的话 一个是逻辑比较复杂 一个是inline message就很难控制。

想问问有没有大佬遇到这种情况。有没有什么idea可以分享一下

[dosubot[bot]]

Hi @Henry-G-H-Huang! I'm Dosu and I’m helping the ant-design team.

虚拟化列表和表单校验在 Ant Design 体系下确实存在技术瓶颈：只有被渲染（可见）的 Form.Item 才能被表单系统注册和校验，未渲染的项（被虚拟化隐藏的）无法触发校验，也无法显示内联校验信息，这是虚拟化和表单系统结合的通用限制相关讨论。

目前社区和官方都没有彻底解决这个问题的方案，只能权衡性能和校验体验。常见做法有：

• 只对可见项做内联校验，未渲染项在提交时用 form.validateFields() 做整体校验，必要时弹窗或列表方式展示全局错误信息，而不是依赖每个卡片的内联 message。
• 用 Form.useWatch 或 onValuesChange 监听所有表单值变化，结合 getFieldsValue(true) 保证数据完整性，但校验和 message 依然只能针对已渲染项官方文档说明。
• 如果业务必须所有项都能校验并展示 message，可以考虑在提交前临时渲染所有项（比如滚动到所有卡片，或批量挂载），触发一次全量校验后再恢复虚拟化，但这会有性能抖动。
• 极端场景下只能自定义校验逻辑，脱离 Form 的 rules 属性，自己维护错误状态和 message 展示，但实现复杂度和一致性会变差。

官方建议还是优先用单一 Form + Form.List 管理所有数据，虚拟化只做渲染优化，校验体验做适当妥协官方建议。如果业务对校验和 message 展示要求极高，可能需要自研一套虚拟化友好的表单系统。

相关社区讨论和案例可以参考：

• 虚拟化表单校验问题讨论
• Form.List + 虚拟化最佳实践

如需具体代码实现或全局错误展示的 UI 方案，可以补充下你的具体需求场景。

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.