Imperative form submit method

[bombillazo]

Hello.

We've created a patch for this library, which has worked wonderfully. This change allows users to submit forms imperatively with a new submit function returned by the form hook, a feature that users have long requested (#566). This is done by giving the form component a unique ID that is stored within the form context of the RHF instance.

Previously, one had to restructure their components by wrapping items and buttons into the form context to gain access to the handleSubmit function and trigger it manually. Now, we can do this:

import { useForm } from 'react-hook-form';

export const MyComponent: FC = () => {
  const form = useForm({ 
    id: 'my-new-form', // optional 
  });

  const onSubmit = () => {
  // some summit logic
  }

  return (
    <>
      <Button
        onClick={() => {
          form.submit();
        }}>
        Submit
      </Button>
      <form
        id={form.id}
        onSubmit={handleSubmit(onSubmit)}>
        ...
      </form>
    </>
    );

}

The beauty is that one can trigger the form from any component with the form.id, which is now returned by the useFormContext(); hook. You can also specify your own ID value for the form if you want to have control over it, but if not then RHF will generate a UUID.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[bombillazo]

It's failing due to an increased bundle size, up to 10.23KB. Not sure how to incorporate the UUID generation without affecting bundle size.

[bombillazo]

Hey @bluebill1049 , I believe this is a feature that could benefit many users as well, I'd love your feedback for it when possible.

[bluebill1049]

hi, could we just do this?

<form onSubmit={handleSubmit(....)}>
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" value="Update"/>

[bombillazo]

Hey @bluebill1049 , that assumes we only want to trigger a submit with a button click. But we may want to submit a form programmatically by other means. Also, having the submit input/button outside the form only works when setting up the form with the proper ID (this PR takes care of that).

By adding id and the submit function to the form context, you can access them both to call submit from any component that does not have direct access to the form object. With this change, any logic can trigger a submit event.