Adding two forms on the same page with react-hook-form

Question

I am new to REACT-HOOK-FORM. I have created a profile page where I need to create two separate forms. Once for "Change Password" and another for "Profile Change". I am struggling in creating two separate forms via REACT-HOOK-FORM and utilizing that for providing validations.

const { handleSubmit, errors, control, reset, setValue } = useForm({
mode: "onSubmit",
reValidateMode: "onChange",
defaultValues: "",
validateCriteriaMode: "all",
submitFocusError: true,
nativeValidation: false,
});

Do I need to perform some edits in the above code? Please help.

I think the easiest way is to create two other components, one for change password and one for profile change. — Stutje, Sep 02 '20 at 09:41
Ohh yes, I totally did not think in this way. Let me try and I believe this should work, — Ratnesh Soni, Sep 02 '20 at 10:15

score 9 · Answer 1 · answered Apr 15 '21 at 15:13

This is the correct answer. See how i destructured the objects

    const {
    register,
    handleSubmit,
    watch,
    errors,
    setValue,
    setError,
    control,
    formState: { isSubmitting, isValid },
  } = useForm({
    resolver: yupResolver(schema()),
    mode: "onTouched",
    defaultValues: {},
  });


    const {
    register:register1,
    handleSubmit:handleSubmit1,
    watch:watch1,
    errors:errors1,
    setValue:setValue1,
    setError:setError1,
    control:control1,
  } = useForm({
    resolver: yupResolver(schema1()),
    mode: "onTouched",
    defaultValues: {},
  });

I think this should be the correct answer. In addition to this, if you are using strict TS, you should do something like this: const { register:regChPass, getValues:gvChPass, handleSubmit:hsChPass, watch:wChPass, formState: { errors:errChPass, dirtyFields:dfChPass } } = useForm(); This is an example extracted from a ChangePassword form. — Hybos, Apr 24 '22 at 07:58

score 5 · Accepted Answer · edited Oct 17 '22 at 12:56

You need to create a copy of the "useForm" in the following way

const { handleSubmit, errors, control, reset } = useForm({
    mode: "onSubmit",
    reValidateMode: "onChange",
    defaultValues: "",
    validateCriteriaMode: "all",
    submitFocusError: true,
    nativeValidation: false,
});
    
const {
  handleSubmit: handleSubmit1,
  errors: errors1,
  control: control1,
  reset: reset1,
} = useForm({
  mode: "onSubmit",
  reValidateMode: "onChange",
  defaultValues: "",
  validateCriteriaMode: "all",
  submitFocusError: true,
  nativeValidation: false,
});

Now basically you can create two forms under your render function like following

<>
  <form onSubmit={handleSubmit(onProfileChange)} noValidate autoComplete="off">
    {/* Reference "error" and "control" variable to validate your form fields */}
  </form>

  <form
    form
    onSubmit={handleSubmit1(onProfileChange)}
    noValidate
    autoComplete="off"
  >
    {/* Reference "error1" and "control1" variable to validate your form fields */}
  </form>
</>;

Now you can have two different forms on the same page validated by react-hook-form without handling too many state variables.

Adding two forms on the same page with react-hook-form

2 Answers2