React Hook Form and breaking up form components

I'm trying to convert a previous app to t3 stack and use some of the libs that I've seen theo use to simplify the code and make it work more consistently. So far most things are going great, but the point I'm stuck on is converting some of my more complex forms to react-hook-form.

For some background my most complex form currently consists of a few reusable "dumb" form segments. These segments take an object as a value and call an onChange() function with an updated version of the whole object whenever one of the fields is modified. The top-level component has a state variable that contains all of these sub-objects. When the user is done with the form the entire object is checked and submitted to the api endpoint. These are the issues I'm having:

1) My first thought was to treat each one of my dumb form segments as a controlled input wrapped with a

<Controller />

<Controller />

. However, if I want to be able to display errors on the text fields in the sub-component I don't think I can do that. Is this correct?

2) Assuming I can't do (1), then I need to pass the form methods down into each form segment to allow me to access the

errors

errors

objects. Here, typing becomes an issue. The form segment is designed to be re-used in several different contexts, not always as part of the same form. So when I pass the form methods down to the segment I don't know what generic type to give them. I know the type that this segment of the form is supposed to deal with, but the controller passed down to me is for the top-level form, not this subsection. Below is a simplified example:

function FormSegment1(props: FormSegment1Props) {
  // The formMethods returned here has the type of `MyForm.settings`
  // How can I say here that I don't know the type of the whole object
  // but that some part of it will be a `{ firstName: string, lastName: string }`
  // so that I can reference those fields / types here?
  const formMethods = useFormContext();

  ...
}

function MyForm1() {
  const [settings, setSettings] = useState({
    //a bunch of other things
    formSegment1: {
      firstName: "",
      lastName: "",
    }
  })

  return (
    <FormProvider {...methods}>
      <form>
        <FormSegment1 />
      </form>
    </FormProvider>
  )
}

function FormSegment1(props: FormSegment1Props) {
  // The formMethods returned here has the type of `MyForm.settings`
  // How can I say here that I don't know the type of the whole object
  // but that some part of it will be a `{ firstName: string, lastName: string }`
  // so that I can reference those fields / types here?
  const formMethods = useFormContext();

  ...
}

function MyForm1() {
  const [settings, setSettings] = useState({
    //a bunch of other things
    formSegment1: {
      firstName: "",
      lastName: "",
    }
  })

  return (
    <FormProvider {...methods}>
      <form>
        <FormSegment1 />
      </form>
    </FormProvider>
  )
}

3) In general, this all feels very complicated. I really want to have reusable form segments because some parts of my forms get quite complex and I need to decompose them. Is react-hook-form the best tool for this job?

cdialpha•10/19/22, 7:00 PM

Also a newb here so I might be wrong,
Would you be looking for connect and not Controller ?
Isn't controller for uncontrolled components?
I know it's just illustrative, but a little hard to tell without seeing what's inside <FormSegment1 />

TomOP•10/19/22, 8:49 PM

Would you be looking for connect and not Controller ?

TomOP•10/19/22, 8:49 PM

from their docs:

TomOP•10/19/22, 8:49 PM

so i think im right that controller is for controlled inputs

TomOP•10/19/22, 8:50 PM

As for connect vs controller im pretty sure youre referring to this:

TomOP•10/19/22, 8:51 PM

this doesnt really solve any problems as far as i can tell. the ConnectForm is just a component you can make yourself that would make it slightly more ergonomic to use the FromContext

TomOP•10/19/22, 8:52 PM

maybe you can explain a little more?

TomOP•10/19/22, 8:52 PM

I know it's just illustrative, but a little hard to tell without seeing what's inside

its tricky. my actual components are pretty complicated

TomOP•10/19/22, 8:52 PM

some of them are just a wrapper around a few inputs

TomOP•10/19/22, 8:53 PM

some of them have arrays and dynamic forms inside them

TomOP•10/19/22, 8:53 PM

didn't want to overwhelm people with a mass of code

TTom from their docs:

cdialpha•10/19/22, 10:59 PM

I was under the impression that Controller was for uncontrolled components... no?

TTom this doesnt really solve any problems as far as i can tell. the ConnectForm is j...

cdialpha•10/19/22, 11:01 PM

Based on your description of it being a wrapper component, that sounds like the intended use case for Connect Form, yeah?

TomOP•10/19/22, 11:01 PM

connect form would help, but it doesnt let me dereference the type correctly afaict

TomOP•10/19/22, 11:02 PM

because the returned register function is still based on the root form's type, not the subcomponent im trying to deal with in the subcomponent

cdialpha•10/19/22, 11:03 PM

I was having difficulty with this last week. Trying to get a file upload component to work. I did a hacky work around where I passed state up and down, used an invisible input, and then used setValue (from RHF.

cdialpha•10/19/22, 11:04 PM

I'm sure it'd make a senior dev's eyes bleed. but it seemed to get the job done.

cdialpha•10/19/22, 11:04 PM

probs not helpful for you tho haha.

TTom connect form would help, but it doesnt let me dereference the type correctly afa...

cdialpha•10/19/22, 11:05 PM

sorry can you clarify?

cdialpha•10/19/22, 11:05 PM

you mean like input, select, textarea, radio, etc ?

TomOP•10/19/22, 11:08 PM

Not quite. It's a bit complicated but I'll try to explain

TomOP•10/19/22, 11:08 PM

I have a big form that's represented by several js objects

TomOP•10/19/22, 11:09 PM

Each object represents a sub form

TomOP•10/19/22, 11:09 PM

So like 1 section will ask for your name, address, email etc

TomOP•10/19/22, 11:09 PM

Another will ask for stuff more specific to the website

TomOP•10/19/22, 11:10 PM

But the useForm() is based on the big top level form object

TomOP•10/19/22, 11:11 PM

If I pass that down to a child component that deals with the name address etc

TomOP•10/19/22, 11:11 PM

Then it doesn't know how to access the fields it needs and it doesn't know the type of the useForm () methods passed to it

TomOP•10/19/22, 11:12 PM

I hope that makes sense

TomOP•10/19/22, 11:13 PM

So I lose all my type safety and everything in the cold components

TomOP•10/19/22, 11:14 PM

Child*

cdialpha•10/19/22, 11:19 PM

And it would be too disruptive to the project to totally refactor?

cdialpha•10/19/22, 11:20 PM

Yeah sorry, I better let someone with more knowledge jump in.

cdialpha•10/19/22, 11:20 PM

Thanks for the extra context tho

TomOP•10/19/22, 11:21 PM

This is the refactor :p

TomOP•10/19/22, 11:24 PM

The problem is that the components are pretty complicated on their own

TomOP•10/19/22, 11:25 PM

There's a bunch that ate managing arrays with multiple fields

cdialpha•10/19/22, 11:25 PM

hahaha my b. Yeah seems like there's gotta be a simpler solution than working with large complicated objects.

TomOP•10/19/22, 11:25 PM

Are*

cdialpha•10/19/22, 11:25 PM

but easier said than done, obviously.

TomOP•10/19/22, 11:26 PM

Yeah. I wish so but i kinda don't believe it. The biggest problem is that there's a 7 step wizard for setting up things

TomOP•10/19/22, 11:26 PM

I want to simplify it but I want to do that after I get everything working again and I can't really remove things. I can just make them look simpler

TomOP•11/7/22, 5:21 AM

yeah i tried that. it kinda all broke down when i had an input component that had the job of building an array of objects

TomOP•11/7/22, 5:22 AM

sorry. just noticed you sent this days ago

TomOP•11/7/22, 5:23 AM

but once i was inside the subcomponent all info on the types was completely lost and react-hook-form has pretty mediocre support for types within field arrays