Master your And Design form with React Hook Form!
npm install react-hook-form-antdMaster your Ant Design form with React Hook Form!




English | ็ฎไฝไธญๆ
- react-hook-form ^7
- antd ^5
``bash`
npm install react-hook-form-antd
You may have an original antd form like below
Show code
`tsx`
name="username"
rules={[
{ required: true, message: 'Required' },
{ max: 15, message: 'Username should be less than 15 characters' },
]}
>
name="password"
rules={[{ required: true, message: 'Required' }]}
>
Check the EXAMPLE for this form after using react-hook-form-antd!
All you need to do:
1. Use useForm from react-hook-form and get controlFormItem
2. Use from react-hook-form-antd instead of Form.Itemcontrol
- Pass to all FormItem (Field names can be inferred by control ๐)rules
- Remove and use react hook form resolver instead (You can use schema from any validation libraries ๐คฉ)handleSubmit
- Use in onFinish
3. Enjoy! ๐
> Ant Design Form.Item API
A component instead of Form.Item in antd. It has inherited all props from Form.Item except rules validateStatus (If you need rules, please use react hook form resolver instead)
Added and modified props:
| Prop | Type | Description |
| --------- | ------- | --------------------------------------------------------------------------------- |
| control | Control | control object from useForm |name
| | string | form field name |
#### TypeError: elm.focus is not a function
When using an upload component, set shouldFocusError: false in your useForm` configuration. This will prevent React Hook Form from trying to focus on the error, effectively resolving the issue.
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!