Nested forms

[gadiGuesty]

Hey all, what is best practice when this kind of ux is given: Nedted form example. HTML 5 forbid form nesting:https://stackoverflow.com/questions/379610/can-you-nest-html-forms. though seems like there are hacks around it even with react hook form:Nested form in React hook form. What would be the right way to do it?

[JamesWong1999]

in react hook form, you probably want to build multiple forms. so you can have a main form and update the main form with sub form values.

[yleflour]

You can use portals: https://codesandbox.io/s/react-hook-form-nested-portal-6x3fvy?file=/src/App.tsx

[theshubhagrwl]

As far as I understand, the work of portal is to render the form. For me the rendering was not an issue and hence I didn't use portals for it. I simply followed this for rendering out the form and it works. The real issue was I wanted to submit the nested form first and then the main form.

Correct me if I am wrong here.

[akucharczyk]

Just use in the form event.stopPropagation()

To call handleSubmit probably just call it like this: handleSubmit(yourSubmitFunction)(event)

[M4Marvin]

But the event is deprecated.

[mshahzebraza]

this is not scalable either.
Suppose you're building a multi-step form, with say 5 stages.

each of these stages might contain a nested dialog form.

You wouldn't want to go for each of these nested forms and stop propagation from there.
I faced a similar issue earlier, and in the parent form, I just checked if the submission is coming from the allowed targets (by equating the target.name with the allowed target) and then assigning the name to the allowed submission trigger.

That way I just modify the parent form handler once, and in future if I add multiple nested forms, I don't need to worry about it

[tatsmaki]

You should definitely look into the portals. Nested form is not a valid HTML structure – this can impact both UX and SEO.
The portal can render your modal window in the outer DOM, so your form will no longer be nested.

[benmarg]

Okay finally figured out the answer to this, this issue has been haunting me for way too long:

 <form
     onSubmit={form.handleSubmit(onSubmit)}
     id="unit-skill-dialog"
  >

<Button type="submit" form="unit-skill-dialog">
  Submit
</Button>

Add the id and form attributes to the <form> and <submit> button on the inner RHF instance, and this will prevent the event from propagating to the parent, no need to use e.stopPropogation

[hmaesta]

Hey, Benjamin! I created a Codesandbox to reproduce your suggestion, but it didn't work. Is there anything I'm missing?

[mshahzebraza]

@hmaesta You're right. This doesn't work. THe nested forms stil submit.

This solution worked: for me https://github.com/orgs/react-hook-form/discussions/7038#discussioncomment-11228568

[mwarger]

The easiest way I've seen to get this working (as none of the tricks about form have worked for me) is to just not use form at all and trigger the submit from the button itself.

Advantages are not having to worry about form IDs (which did not work in my app - I don't know why), not having to worry about invalid form nesting, not having to worry about which form events to call or not. Doing it this way, I can have separate sub forms each handled by RHF with different sub-schemas as re-usable pieces I can use throughout my app, but they communicate a small set of values up to their parent form with a callback that is called whenever the subform is done with its successful submission.

Something like this:

<button
  type="button"
  onClick={handleSubmit(onSubmit, onInvalid)}
>
  Create
</button>

[Aklile-Yilma]

It works for me