How to handle form with nested component?
Hello!
I need help regarding form handling with nested components.
Basically my form is composed of the following:
----------------------------------------
Form
--Header
---Field1
---Field2
---Field3
---Field4
---Field5
--Tabs
---Tab1(separate component)
----Field6
----Field7
----Field8
----Field9
----Field10
---Tab2(separate component)
----Field11
----Field12
----Field13
----Field14
----Field15
----------------------------------------
Question:
How can I pass the useForm to other components?
Is that the right way?
I tried to put the useForm in each components but upon saving I am not be able to pass the data of field6 to 15 I only get 1 to 5
Thanks
5 Replies
Hey @Sigmund ,
Which form library are you using? 👀
ratty-blushOP•3y ago
Hi @Omer ,
Thank you for your quick response.
@pankod/refine-react-hook-form
You can handle it with the FormProvider component ⚡
Doc: https://react-hook-form.com/advanced-usage/#FormProviderPerformance
Advanced Usage
Performant, flexible and extensible forms with easy-to-use validation.
ratty-blushOP•3y ago
Thanks @Omer . Let me check this documentation.
Hi @Omer!
Issue already fixed using FormProvider and useFormContext.
//In Main Page I wrapped the <Create> component with FormProvider
<FormProvider {...methods}>
<Create></Create>
</FormProvider>
//In child Page, using useFormContext i get the register and formState
export const Tab1: React.FC = () => {
const t = useTranslate();
const { register, formState: { errors }, } = useFormContext();
}
Cool 🍻