You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Let's assume we have 10 different forms that all differ from each other
However, they all have the two fields foo and bar
We want to abstract everything related to the fields foo and bar into its own component which can be reused for all 10 forms
Describe the solution you'd like
A clear and concise description of what you want to happen.
We want to create a component that can receive a react hook form as a property which must contain the two fields foo and bar + any additional fields.
Additional context
Add any other context or screenshots about the feature request here.
I have tried implementing this using a generic UseFormReturn but typescript complains that Argument of type '"foo"' is not assignable to parameter of type 'Path<T>'.
'use client';import{UseFormReturn,useForm}from'react-hook-form';exportdefaultfunctionPage(){return(<div><FormA/><FormB/></div>);}typeFormAFields={foo: string;bar: string;a: string;};functionFormA(){constform=useForm<FormAFields>();return(<form><ReusableFormSectionform={form}/><div>{/* other fields... */}</div></form>);}typeFormBFields={foo: string;bar: string;b: string;};functionFormB(){constform=useForm<FormBFields>();return(<form><ReusableFormSectionform={form}/><div>{/* other fields... */}</div></form>);}typeReusableFormSectionFields={foo: string;bar: string;};functionReusableFormSection<TextendsReusableFormSectionFields>({
form,}: {form: UseFormReturn<T>;}){const{ register }=form;return(<>{/* Argument of type '"foo"' is not assignable to parameter of type 'Path<T>'.(2345) */}<input{...register('foo')}/><input{...register('bar')}/></>);}
See this recent issue about the same topic. It doesn't look like this feature will be implemented anytime soon. This comment is the best workaround I've found.
I don't have any other suggestions, sorry. From what I've read of other libraries, RHF is the simplest to use and most performant, so I've tried to find workarounds for RHF. I'm not sure what other libraries have better support for reusable forms.
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
foo
andbar
foo
andbar
into its own component which can be reused for all 10 formsDescribe the solution you'd like
A clear and concise description of what you want to happen.
foo
andbar
+ any additional fields.Additional context
Add any other context or screenshots about the feature request here.
I have tried implementing this using a generic
UseFormReturn
but typescript complains thatArgument of type '"foo"' is not assignable to parameter of type 'Path<T>'.
https://stackblitz.com/edit/stackblitz-starters-pfcy87?file=app%2Fpage.tsx&view=editor
The text was updated successfully, but these errors were encountered: