Multiple forms on one page, with different defaultValues

[h0jeZvgoxFepBQ2C]

Is there any better solutation than this?

  const { register, handleSubmit, watch, errors, setError, control } = useForm({
    defaultValues: object1
  })

  const { register2, handleSubmit2, watch2, errors2, setError2, control2 } = useForm({
    defaultValues: object2
  })

[bluebill1049]

here is a video on building multiple steps forms: https://www.youtube.com/watch?v=CeAkxVwsyMU

[bluebill1049]

i think you want to use shouldUnregister: false and still keep in the same form, so when it submits, it will contains both section's data.

[irekrog]

https://stackoverflow.com/questions/60276510/how-to-make-react-hook-form-work-with-multiple-forms-in-one-page @bluebill1049 look at the most upvoted answer and I dont know is it anti-pattern have two useForm in one component?

[bluebill1049]

https://stackoverflow.com/questions/60276510/how-to-make-react-hook-form-work-with-multiple-forms-in-one-page @bluebill1049 look at the most upvoted answer and I dont know is it anti-pattern have two useForm in one component?

you can have as many as you want, it's valid HTML :) It's valid, but you want to keep a large form which divided into section (which involve those section gets unmounted) you can consider to use shouldUnregister:false, but personally i prefer separate form and collect data in a state lib.

[bornbrainy]

Please @bluebill1049 How can I effectively use React Hook Form to manage multiple forms, ensuring that each form's state and validation logic is isolated but still part of a cohesive user interface?

I'm working on a project that requires managing several forms within a single React application. Each form represents different data models, such as incident reports, victim details, damage assessments, and event logs. I need a way to dynamically render these forms based on user interaction, ensuring that each form captures and validates its respective data accurately. The challenge is to maintain a clean and manageable codebase while handling state, validation, and submissions for multiple forms. I'm considering using React Hook Form due to its performance.

[bornbrainy]

you said you prefer separate form and collect data in a state lib. @bluebill1049 can you show us some example ?

[Sristi27]

How to build two different forms in the same component?

[Moshyfawn]

Either divide them into their separate components or call multiple useForm hooks and assign different names to form methods like

const { register: registerFirstFormField } = useForm()
const { register: registerSecondFormField } = useForm()

Keep in mind, that depending on the complexity of your form, the latter solution can be a performance hit.

I'd go with one useForm hook per component

[Sristi27]

Will this work if both the forms have different input fields?

[Moshyfawn]

Sure, provided, you use the corresponding form instance and it's form methods

const MultipleForms = () => {
  const {
    register: registerFirstField,
    handleSubmit: handleFirstFormSubmit
  } = useForm()
  const {
    register: registerSecondField,
    handleSubmit: handleSecondFormSubmit
  } = useForm()

  return (
    <div>
      <form onSubmit={handleFirstFormSubmit(onFirstFormSubmit)}>
        <input {...registerFirstField('firstFormFieldName')} />
      </form>
      <form onSubmit={handleSecondFormSubmit(onSecondFormSubmit)}>
        <input {...registerSecondField('secondFormFieldName')} />
      </form>
    </div>
  )
}

A live CSB example

[Sargnec]

Is there a way to give 2 different register to 1 input?

[Moshyfawn]

Is there a way to give 2 different register to 1 input?

No, you'd simply override the event handlers register method returns, unless you call the method before your return statement and assign the returned props manually. But I don't see why you'd actually need to do this

[mani-cafs]

antd 2 different forms how to use useForm in reactjs