Allow programmatically submit about remix-forms HOT 9 CLOSED

I needed this ability myself. I have a complex component where it has a dialog modal that has it's own onClick methods and where the react-hook-form resides in it's body. There is no way to connect the forms handleSubmit and modal onClick methods.

I have a really old version of remix-forms which I forked a while ago and not had the time to update it. Well, because it works so well. 😄

All I ended up doing was the following to the Form component for it to support a ref property:

function Form<Schema extends SomeZodObject>(
  {
    mode = "onSubmit",
    ...
    ...props
  }: FormProps<Schema>,
  ref,
) {
   return (
    <form
      ref={ref}
      ...
    />
}

export default forwardRef(Form)

Then the following to execute programmatically:

if (formRef.current) {
   ;(formRef.current as EventTarget).dispatchEvent(
      new Event("submit", { cancelable: true, bubbles: true }),
      )
}

from remix-forms.

@azzzy, have you tried using the onTransition prop for resetting the form? We do that in this example.

Since we added onTransition I haven't had any other use case where accessing the form imperatively is necessary. How about your use cases?

from remix-forms.

@diogob Although I took a look at the solution in #136 I am not quite sure. That said, once I have finished the current work that I am going through. I will be bringing up my fork of remix-forms to the latest and then I'll see where things stand. Maybe in a week or so, I'll then be able to comment here on any improvements or it's perfect for my use case. 😄.

Many thanks for being reactive and making a PR so quickly for this amazing library. Looking forward to comes next in '23. 🚀

from remix-forms.

I'm closing this issue since #136 exposes a submit function to the children function and it was released in v1.5.0.

@paulm17 feel free to open a new issue in case you need access to submit outside of the children function.

from remix-forms.

I also need this in order to be able to reset the form.
Maybe a low hanging fruit will be to simply add a an optional Ref<HtmlFormElement> prop to the component? This won't lead to a breaking change, unlike using forwardRef. This is how I am monkey-patching at the moment.
form-ref.txt

from remix-forms.

@danielweinmann, this works nicely, somehow I missed it in the documentation. Thanks for the hint!

from remix-forms.

@danielweinmann talking to @gustavoguichard we found a use case for this, when one wants to imperatively trigger the form submission (let's say when a verification code is typed). But instead of relaying the form ref we could expose a submit function for the form children function. Thoughts?

from remix-forms.

We just found another use case for programmatically submitting the form: submit confirmation using a dialog.

from remix-forms.

@paulm17 I'm curious to know if the solution in #136 would solve your use case. We have exposed a submit function that triggers the submit event, but that is only being exposed in the form children function.

from remix-forms.