async submitForm

Bug, Feature, or Question?

Feature

Current Behavior

formikBag.submitForm does not consider submit handlers that return promises.

Desired Behavior

formikBag.submitForm should return a Promise (ideally the submit handler’s own Promise) so the developer can handle server API rejections accordingly in cases where it is not possible / desirable to handle them in the original submit handler.

Suggested Solutions

Would require changes in src/Formik.tsx. In it, methods submitForm and executeSubmit.

Additional Information

Commented here #42, but created a new issue for visibility as I think I have a valid use-case. To reiterate, I want to create a custom reusable form component that handles server API validation errors in a generic way.

Small example of what I want to do:

class LoginForm extends React.Component {
  async handleSubmit(values) {
    await axios.post('login', values) // no try/catch here
  }

  render() {
    return (
      <Formik
        onSubmit={this.handleSubmit}
        render={() => (
          <CustomGenericForm>
            ...stuff
          </CustomGenericForm>
        )}
      />
    )
  }
}

class CustomGenericForm extends React.Component {
  handleSubmit = async event => {
    event.preventDefault()
    const { formik } = this.context
    try {
      await formik.submitForm()
    } catch (error) {
      if (error.response && error.response.data && error.response.data.validationErrors) {
        formik.setErrors(error.response.data.validationErrors)
      } else {
        throw error
      }
    } finally {
      formik.setSubmitting(false)
    }
  }

  render() {
    const { children } = this.props
    return <form onSubmit={this.handleSubmit}>{children}</form>
  }
}

CustomGenericForm.contextTypes = {
  formik: PropTypes.object,
}

Or is there a way to achieve what I want with the current version?

---

• Formik Version:1.0.0-alpha.2
• React Version: 16.2

[jaredpalmer]

This is now available in formik@canary

[Filson14]

+1 on that feature. I’m trying to define handleSubmit as a function returning promise. Would like to get benefit from it when triggered submitForm() inside form component. Currently, submitForm returns “a promise”, but it is not that one I expected. Triggering handleSubmit directly (as said in the docs, it should also start submit process) it returns nothing.

I’m not sure if i missed something but I guess it’s a good issue to comment. Any suggestions (even for workaround) are welcome 😉

I saw that there is something developed currently. #500 Any updates about the work status?Long time since the issue has been reported.