Remote Submit in React Hook Form

[NasrinLatifi]

Hi guys!
I'm using React Hook Form. And I need to submit my form from another FC (Function Component).
I read the code of https://codesandbox.io/s/remote-handlesubmit-ipbqb?file=/src/App.js:490-1007, but it is submitted from the component that contains the form. But I need to submit it from another component.
Could you please guide me?

[bluebill1049]

see this answer: #566 (comment) may helps you.

[NasrinLatifi]

Thanks a lot, but I want to handle it by js and without a button.

[Moshyfawn]

Just pass the onSubmit callback from a parent component into your Form component. If you need to have the submit button outside the form, you can add an id attribute to the form and pass the same form id to your submit button to it's form attribute.

const formId = "form-id"

return (
  <>
    <form id={formId} onSubmit={handleSubmit(onSubmit)}></form>
    <button type="submit" form={formId}>Submit</button>
  </>
)

[Moshyfawn]

It works just when register and handleSubmit import from same useForm.

You have to use the form methods from the same form instance. Other-wise, it won't work.

[NasrinLatifi]

Thanks a lot :)

[KarafiziArtur]

Is there a way to get the ref of the form from the context?

[Moshyfawn]

No

[KarafiziArtur]

No

Do you plan to add the feature to submit the form by a specified handler from the context?

[DaiNguyen1902]

You can add a ref to the form component and dispatch a submit event to that form

// Init react hook form
const {
    register,
    handleSubmit,
    formState: { errors },
} = useForm();

// Init a ref to the form
const formRef = useRef(null);

// Add formRef to you form
return (
  <form ref={formRef} onSubmit={handleSubmit((data) => console.log(data))}>... </form>
)

// put this code line where you want to call remote submit
formRef.current.dispatchEvent(
    new Event('submit', { cancelable: true, bubbles: true })
)