Como se menciona en #60277873 , para crear formularios anidados debe cambiar el nombre de los métodos del formulario anidado, como:
const { register, formState: { errors }, handleSubmit, } = useForm({ mode: "onBlur", });se convierte en:
const { register: register2, formState: { errors: errors2 }, handleSubmit: handleSubmit2, } = useForm({ mode: "onBlur", });Sin embargo, necesito usar FormProvider y no sé cómo pasar métodos y modificar el nombre de los métodos ya que no podemos hacer:
<FormProvider {register: register2, formState: { errors: errors2 }, handleSubmit: handleSubmit2 }>¿Alguien ya se ha encontrado con este problema?
Mirando el código fuente de react-hook-form , no creo que puedas hacer esto de inmediato, a menos que crees tus propios contextos y ganchos. Algo como esto:
const MyFormCtxDefaults = { form1: null, form2: null, }; const MyFormCtx = React.createContext(MyFormCtxDefaults); const MyFormCtxProvider = (props) => (<MyFormCtx.Provider value={props}>{children}</MyFormCtx.Provider>); const useMyForm = () => React.useContext(MyFormCtx); const MyForm = () => { const form1 = useForm(...); const form2 = useForm(...); return ( <MyFormCtxProvider form1={form1} form2={form2}> <MyForm1 /> <MyForm2 /> </MyFormCtxProvider> ); }; const MyForm1 = () => { const {register} = useMyForm().form1; return ( <input {...register('foo')} /> ); }; const MyForm2 = () => { const {register} = useMyForm().form2; return ( <input {...register('bar')} /> ); };Va a ser un dolor mantener mecanografiado duro, para obtener ayuda, consulte la implementación original https://github.com/react-hook-form/react-hook-form/blob/master/src/useFormContext.tsx#L4