search

flipbyte / formik-json-schema

Easily create react forms using JSON / Javascript Object
MIT License
152 stars 40 forks source link

Submit form from outside? #35

Closed compojoom closed 5 years ago

compojoom commented 5 years ago

In our UI the the form is rendered inside of a bootstrap Modal.

the form itself appears in the modal body and the submit button is in the modal footer. With formik I was using this: https://stackoverflow.com/questions/49525057/react-formik-use-submitform-outside-formik

to trigger the submission of the form. Is this somehow possible with formik-json-schema?

I also tried this: https://github.com/jaredpalmer/formik/issues/33#issuecomment-317169770 but the ref actually doesn't have access to the formik form, so this is also not working.

easeq commented 5 years ago

There are a few possible solutions:

  1. If it's a simple form in a modal and the requirement is just that button should appear in the modal footer, you can bring the modal content (whichever is necessary) inside the form component. You can use the container renderer "div" available in formik-json and apply the appropriate classes so that the markup inside the form tag matches the markup of your modal.

  2. You can create a custom container renderer as shown in issue #19 but with the sole purpose of binding the submitForm handler as in the solutions you mentioned. You can pass the external binding handler as a config property of your customer container renderer. The custom config might look something like this:

"custom-renderer": { ...otherProps, bindingHandler: #your function# }

compojoom commented 5 years ago

Well, on the web it is in a modal footer. Having a container and faking it is a solution, but... The modal footer can have more things related to the form - I don't want to add those to the json schema. The forms are going to live on the server. The user browses the forms, selects one and he has a save button...

I think that for my purposes exposing the ref on the formik form is the best thing.

Also I'm experiment with this on React Native. There we have the save button in react navigation. By the look at the source code - it seems that I'll only have to write the renderers. Have you already thought on how we can make this lib work with RN out of the box?

easeq commented 5 years ago

Yes the container faking solution will not work if the modal contains anything but the form.

I wasn't sure if the ref solution worked, once you've updated the PR with an example I'll take a look at it.

Regarding RN, I haven't thought of anything yet. If you have any suggestions, do let me know.