formik-antd

formik-antd

由于我们的项目使用了antd组件库，所以希望在使用formik来实现表单的时候页面展示仍然可以是antd组件的样子，还好formik有一个很好的和antd结合的库formik-antd可以帮助我们快速实现一个formik和antd结合的表单；oh yeah😄

formik 和 antd 的结合使用

formik-antd v2 CodeSandbox (Ant Design 4)

formik-antd v1 codesandbox (ant design 3)

Instead of importing your form components from antd, you need to import them from 'formik-antd' and set their name prop. Now the component is connected/synced with the corresponding Formik field!

使用 formik-antd 的时候我们只需要从 formik-antd 中引入我们的表单组件即可

校验函数 validate 属性需要添加到 Form.Item 上而不是 Input 上

表单和字段级验证

<Form.Item name='firstName' validate={validator}>
  <Input name='firstName' />
</Form.Item>

渲染验证反馈

• 如果该字段已被 touched 并且相应的字段有验证错误（并将封闭输入组件的边框颜色更改为红色），则呈现错误消息。

• 如果 prop 设置为 true，该字段已被 touched 并且相应的字段没有验证错误，则呈现绿色成功图标消息 showValidateSuccess: boolean。

• 公开一些布局功能和标签（访问https://ant.design/components/form/了解详细信息）。

FastField 支持

Formik 允许通过<FastField/>组件进行性能优化。请阅读有关何时使用此类优化的 formik 文档（通常您不会也可能不应该优化，除非您在生产中遇到性能问题）。为了选择 FastField 支持，所有 formik-antd 组件都提供了一个可选的 fast?: boolean prop。将此设置为 true 启用优化：

<Input name='firstName' fast={true} />

Table

The table components comes with additional helper buttons to add and delete rows

列表和嵌套对象

嵌套对象和数组可以使用类似于 lodash 的括号语法访问，如 Formik 文档中所述。

<Input name='friends[0].firstName' />