Formik: Use multiple form with one submit button

[saeedjalalisj]

Question

I have one page with multiple form. Each form is independent from other.
My question is how to handle all form submitting with one button??

[sudhirdhumal289]

I had the same requirement, you can extract the Formik and Form tags in common file and pass enableReinitialize={true} to your tag. This way you can render the form fields conditionally, you just have to make sure that on changing view you have to pass the view-specific initialValues instance to Formik tag.

Code snippet I used to handle this situation:

render() {
let currentStep = this.props.steps[this.state.currentStepIndex];
const CurrentStepComponent = currentStep.component;

return (<Formik
                        enableReinitialize={true}
                        initialValues={currentStep.initialValues}
                        validationSchema={currentStep.validationSchema}
                        onSubmit={(values, { setSubmitting }) => {
                            setSubmitting(true);
                            // Deal with current form-view values.
                            setSubmitting(false);
                        }}
>
            {CurrentStepComponent && <CurrentStepComponent {...formik} />}
             {
                     // Common submit button can be placed here.
             }
</Formik>)
}

Hope this is helpful for you.

[Andreyco]

More info pls and/or code example

[edwinwong90]

with React hooks https://codesandbox.io/s/formik-multiple-form-in-one-submission-kbf1w?fontsize=14

[Martinnord]

@edwinwong90 Nice job! How would you do validation and error handling with this?

[aakhan89]

@edwinwong90 thanks bro,

can you please do validation and error handling with this to use **Yup**
also can we update state on handleSubmit instead of onChange

[sebastianpatten]

I have the same question!

[specialorange]

Updated code example

https://codesandbox.io/s/formik-multiple-form-in-one-submission-5qmt2

[maddhruv]

Closing due to long inactivity