How to trigger FormRenderer onSubmit from outside form component?

[Amansaxena001]

I ve a FormRenderer where I want to trigger onSubmit or basically get all the things that useForm returns but outside. The useForm only works inside components inside the form so outside it will throw error. Currently I am passing ref and updating it with useForm data during mounting. This is not ideal there should be some clean way if we want to control the form from some other place.

    <FormRenderer
      {...restProps}
      schema={schema}
      FormTemplate={(ftProps: FormTemplateRenderProps) =>
        CustomFormTemplate ? (
          <CustomFormTemplate {...ftProps} />
        ) : (
          <FormTemplate {...ftProps} {...formTemplateProps} />
        )
      }

      componentMapper={{ ...componentMapper, ...componentMapperFromProps }}
      validatorMapper={{ ...validatorMapper, ...validatorMapperFromProps }}
      clearOnUnmount={clearOnUnmount ?? true}
    />

[rvsia]

Hello,

I think your solution does make sense. We are working with a context and to reach the context, you have to be inside that. If you want to call some internal method, you have to do it from the inside. Preferably from the form template.

However, to make it easier, we could provide some onMount event prop to expose it on Form renderer. What do you think, @Hyperkid123?

[Hyperkid123]

@Amansaxena001 if we are just talking about submitting the form you can use the HTML way of creating submit button outside of the form element and use the element references to trigger the event: https://stackoverflow.com/questions/7020659/submit-form-using-a-button-outside-the-form-tag.

If we are talking about programmatically triggering the submit (using the form API) outside of the form itself, there is not a recommended way of doing so right now. We would have to think about it a bit.

We could do some ref magic, but generally in React, to access context value, you have to be within the context. Could you explain the use case you have a bit more? It will help us understand your issues and come up with a solution 🙂

[Amansaxena001]

@Hyperkid123 We have a complex form and in that form we have control buttons Submit & Cancel. This form is opened in a drawer. Now what we want instead of clicking on Save to submit the changes we want to save the changes when we close the drawer. The close button sits on the header which is outside FormRenderer. So as of now as I explain in above I ve passed a ref to FormRenderer components and attached the useForm API response to programatically control the form from outside of FormRenderer heirarchy.

I know this is not a recommended way and also I want to stick to react pattern only. Our whole form is built through DDF only so its quite costly for us to make drastic changes on such complex forms.

Please let me know if you suggest any good workaround that doesn't bite us.

[Hyperkid123]

@Amansaxena001 I have a small sandbox here: https://stackblitz.com/edit/vitejs-vite-k7m5tl?file=src%2FApp.tsx
with close button as a submit button. Let me know what you think.

Other option might very well be, enhancing the submit function and directly call the Drawer close callback.

[Amansaxena001]

@Hyperkid123 the approach definitely looks good and clean without introducing any dependencies b/w components. Let me try that and update you here.

[Amansaxena001]

@Hyperkid123 Works well, thanks for the prompt response, I really appreciate you guys for the help. 🙏🏼

[Amansaxena001]

@Hyperkid123 lets say we are looking to submit a form on the onMouseDown event, triggered by clicking on an empty area of the page. The form and the page are not related in the component hierarchy—they exist independently. Normally, to submit the form, I would need to access it using a formId and then trigger the submission, which would require going outside React paradigms by using document.getElementById. Ideally, if I could use a ref, I would place it in a central location and make it accessible to the necessary components through a shared API.

What do you think?

[Hyperkid123]

In that case, I am leaning towards a custom form template (maybe just buttons) and using the refs.

which would require going outside React paradigms by using document.getElementById

I personally don't have a big problem with this approach. You are using the standard DOM API which ultimately React has to work with. Yes, using the refs is "the React way", but React is only a tool we use to build UIs. We should not abandon the classic API (On which React is built) just because we have a library we use.