关于 Ant Design Form 校验无效的问题

blueju 等级 100 0 0

关键词:

  • Ant Design v4.0.2
  • Form
  • Validation Invalid
  • 校验无效

情景

使用 React + Typescript + Ant Design 重构公司一反洗钱平台部分页面,其一表单需要验证,但是按照 Ant Design Form 中的 Demo 实现后并不效果。

Ant Design Form Demo Url

https://ant.design/components/form-cn/#components-form-demo-basic

解决

在 Form.Item 中,除了需要 rules 指明校验规则外,还必须拥有 name 属性,否则无法正常显示校验提示。

CodeSandbox Demo

https://github.com/blueju/BlogCodeSandBox/tree/antd-v4-form-validate

结语

这一细节,在 Ant Design Form 的文档中,并没有提及,使用时自己需要注意一下。

首发于语雀文档@blueju

预览图
收藏
评论区