Formik: Remote submit

[anhldbk]

How to achieve remote submit with formik? This useful feature from Redux-form

[jaredpalmer]

See the discussion in https://github.com/jaredpalmer/formik/pull/25 .

Since Formik does not use context, whatever ultimately calls submitForm must be a descendant of the form anyways. Not sure having a remote submit will help you.

However, I am 100% open to a submitForm if you can provide concrete example of when this would be preferred over the current API.

[anhldbk]

Thank you @jaredpalmer

[rhyek]

@jaredpalmer I am building my own Form component where what I want it to do is have its own handleSubmit that would call Formik's submitForm, grab any http errors that might arise, and if the errors contain validation errors from the server, do setErrors to get that consistent visual feedback.

I am currently reusing the same yup validation schema with a few changes to it on the backend.

The only way for me to achieve this would be for submitForm to return a promise.

The idea would be something like:

class Form extends React.Component<Props> {
  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
      }
    }
  }

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

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

The issue there, obviously, is submitForm does not return a promise I can await on and so it rejects after I've exited my try/catch leaving me with an unhandled promise rejection.

Is there any way to achieve what I want, currently? Or would this, indeed, require changes to submitForm?

[RodolfoSilva]

Small example of Remote Submit with Formik.

https://codesandbox.io/s/w6nj3zl2l7

This solution is not supported by HOC: withFormik

[Unrealman1]

Small example of Remote Submit with Formik.

https://codesandbox.io/s/w6nj3zl2l7

@RodolfoSilva is it possible to pass "disabled" prop to a remote button, according to Form state (dirty, isSubmitting ) this way?
I am struggling to modify your example to make it work as I described...

[RodolfoSilva]

@Unrealman1 I think it's not possible

[rmlevangelio]

@RodolfoSilva Is it possible with your example to submit the form by just hitting the enter key? Because I think it doesn't have accessibility support if we do a remote submit.

[martin056]

Small example of Remote Submit with Formik.
https://codesandbox.io/s/w6nj3zl2l7

@RodolfoSilva is it possible to pass "disabled" prop to a remote button, according to Form state (dirty, isSubmitting ) this way?
I am struggling to modify your example to make it work as I described...

You need to control whether the button is disabled from the parent component.