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
– Stutje, Commented Sep 2, 2020 at 9:41
Ohh yes, I totally did not think in this way. Let me try and I believe this should work, — Ratnesh Soni
– Ratnesh Soni, Commented Sep 2, 2020 at 10:15

Afuye Olawale · Accepted Answer · 2021-04-15 15:13:51Z

8

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: {},
  });

answered Apr 15, 2021 at 15:13

Afuye Olawale

3113 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hybos Over a year ago

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<ChangePasswordInputs>(); This is an example extracted from a ChangePassword form.

mikayelgrigoryan · Accepted Answer · 2022-10-17 12:56:45Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related