Multiple (dynamic forms)

[robbertrosario]

Hey,

I am currently working on a project which consists of different (dynamic) sections and each section contains multiple inputs (which are also dynamic) at the moment this is one giant form. But the downside to this is that in every section you also submit the others you've touched. So I am looking for a way to create multiple forms without knowing the exact amount.

Something like this wouldn't work

const { formState: { errors } } = useForm();
const { formState: { errors: errors2 } } = useForm();

Because in my case I have so many different sections and forms and don't know the exact amount because they are dynamically rendered.

Does anyone know what the proper way to solve this would be?

[JamesWong1999]

you could break each form into its own component and haveing useForm at each one of them.

[robbertrosario]

The different forms and their contents are unknown, I guess I could create a component that generates a new useForm for every item. However I am also using methods.setValue to set the default selected values in case someone had already answered them. I wouldn't know which form I should call setValue on.

At the moment I am using <FormProvider {...methods}> to pass the methods down to the form below, but the methods.handleSubmit would submit every thing and that's not what I want. So in short;

I would like to have multiple separate forms with their own submit buttons and be able to call setValue to pre-populate the answers without knowing which form they are in.

[arthurmmedeiros]

Hello,

I'm having a similar problem, but <FormProvider {...form1}> will not work with multiple instances of useForm().

Is there a way to do it?

[ashik112]

I am trying to create a multi-step form wizard where is each form will be submitted when I click the "Next" button. The issue is this submit button is outside of the forms. I want to submit individual forms with a single button separately. If I use FormProvider with form validations defined, it will validate everything on the form submission but some values don't need to be validated unless I go into the next step.

Any solutions for this?

[Moshyfawn]

You want to set the form id attribute and put the same value into the form attribute of the button element.
This way your submit button will be linked to your form.
See the W3S docs on form button attribute to learn more

[ritikbanger]

You can have all of them in a single Form Provider, give conditional validation for fields. We can use YUP in the case like if this condition is true then this will happen otherwise that will happen.
OR
Don't use Form provider and use html <form onsubmit={onsubmit} id="1"></form> and give ids for every step.

[Moshyfawn]

You can have all of them in a single Form Provider, give conditional validation for fields. We can use YUP in the case like if this condition is true then this will happen otherwise that will happen. OR Don't use Form provider and use html <form onsubmit={onsubmit} id="1"></form> and give ids for every step.

I was going from OPs description

The issue is this submit button is outside of the forms

That sounds like different form elements with different ids.

Having conditions in your validation schema is a valid approach as well, tho, it's gonna be the same form

[cp-weng]

Any update to this issue?

[kachmul2004]

Hi guys, I was also looking into something similar, then I stumbled upon this and this

I am now giving it a go using MUI Stepper, let me know if it works for you so you can share your solutions with me.

Thanks

[kachmul2004]

I was able to solve this problem, but unfortunately I wasn't able to use react-hook-form because it gave me too many headaches and 2 sleepless nights. I decided to just use useState, and will now look into adding custom validation.

What I ended up doing was:
const edited = useRef(false); const childRef = useRef(); const orders = useRef([]); //an order object in stored in the format {id: 0, data: {name: 'abc', address: '123'}} const steps = useRef([ { id: 0, label: "Order #1", }, ]);
All the above are in the parent component.

• edited tracks whether something was edited on a specific step/form (I pass it as a prop to every child component/form). I then use this boolean to decide whether a new order should be created, or if an old one should be updated/skipped
• childRef helps me use a function in the child component/form called getData(). This function collects data from the child form when I click the Next/Back buttons on the stepper/parent component, and then add this data as an object in the orders variable. By the way, all buttons are on the parent component, no buttons on the child forms
• orders is the orders object as expected
• steps is where I store dynamic step labels and dynamic/incremental ids (whatever can work for you). I also have an addStep function to dynamically create additional steps. The key here is to use the step id as the key prop on the dynamic forms, e.g <OrderForm key={steps.current[activeStep].id} />. The data to populate/create forms will come from either a defaultValues object or from a specific order object from the orders object, depending on whether you are creating a new form, or just pressing the Next/Back buttons to move between forms.

My plan is to now add validation in the handleNext/HandleBack functions, and also a delete function to remove steps.

Finally, the submit button will get the aggregate values from the orders object.

Am sure there could be some cleaner ways to use the buttons and validation, but I am not an expert yet, and I have little time. I will refactor the code in time, but at least, this nightmare is over.

here is the codesandbox, maybe someone can help integrate react-hook-form and Yup and share the complete solution

[ninaboaventura]

Hi folks, I have a similar issue and was wondering if we have any updates on this?

[arthurmmedeiros]

Hi everyone, @robbertrosario @ninaboaventura @ashik112 @Moshyfawn

I was able to solve my problem by creating a context using the react context API. I've created a repository with an example.

Just to summarize:

1 - You can create a new context.

2 - You can then initialise multiple instances of useForm and assign to the context like I did here.

3 - Finally any component inside the context can access any of the forms by doing something like what I did here

Let me know if this helps

[aashishGitHub]

I had same problem, where I had to show multiple independent forms on the same page to be opened based on some conditions, some as sub-forms. The problem was seen when we submit one form, another form in dom used to get submitted.
I solved it by using display none to non displayed forms, kept it inside a portal.

<div
  className={clsx('fixed w-full top-0 right-0 transition-all duration-300', {
    'right-[-100%] ': isForm1Closed,
  })}
>
  <div ref={refFormOne} className={isForm1Closed? 'hidden' : 'block'} />
  <Portal container={refFormOne.current}>
    <FormOne />
  </Portal>
</div>

<div
  className={clsx('fixed w-full top-0 right-0 transition-all duration-300', {
    'right-[-100%] ': isForm2Closed,
  })}
>
  <div ref={refFormTwo} className={isForm2Closed? 'hidden' : 'block'} />
  <Portal container={refFormTwo.current}>
    <FormTwo />
  </Portal>
</div>;