Can RHF forms be nested? i.e. One react hook form inside another react hook form.

[bdata42]

Hi guys, awesome software.

Can I ask - is there support for one react-hook-form within another?

The use case is similar to the form wizard. I have a large multi-step form.
With one section is a "self-contained sub form".

Now, firstly there is the issue of

within . I put the subform into a to escape the warning.

Secondly, there is an issue with submitting the subform.

Either I use a button type='submit', which submits the parent form.

Or, I use the refs approach: <Button onClick={() => formRef.current.submit()} - this appends the data to URL and refreshes the page without triggering the form submit.

Please could I get some advice on how to manage one hook form within another?

My only alternate solution might be to split them all out into their own forms, however I prefer the idea of having just one!

Thanks!

[bdata42]

It looks like in the example here, that the recommended approach is multiple and not just one.

Is this the recommended solution? Thanks!

[bluebill1049]

you can, but you shouldn't put a form inside a form, they should be separate form

<form><form/></form >// nope

<App>
  <form /> // useForm
  <form /> // useForm
</App>

[bdata42]

Awesome, thanks @bluebill1049 much appreciated!