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

user_10609618 0
Viewed 6111

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.

multiple-forms react-hook-form reactjs
2 Answers

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

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 { handleSubmit1, errors1, control1, 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 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-FORMS without handling too many STATE variables manually.

user_127765170
Related