How to run setSubmitting() outside the submit handler?

formik submit form from outside
formik async submit
formik preventdefault
formik not submitting
formik validate only on submit
formik get values outside
formik reset form
formik setfielderror

I'm trying to implement the approach described on https://www.youtube.com/watch?v=5gl3cCB_26M, where all Redux actions are just plain objects (as they were meant to be) and API calls are done by middlewares.

By doing this, the dispatched actions are no longer thunks and can't return a Promise. So I won't be able to use Formik's setSubmitting (to set the isSubmitting flag to false) inside the submit handler, like the code samples on Formik docs and other tutorials I've found.

I've solved the issue in a kinda ugly way, saving a reference of setSubmitting to run it later, inside componentDidUpdate:

import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'

import LoginForm from 'path/to/LoginForm'
import validationSchema from 'path/to/LoginForm/validationSchema'

import { login } from 'path/to/actionCreators'

const initialValues = {
  email: '',
  password: '',
}

class LoginPage extends Component {
  componentDidUpdate() {
    const { auth } = this.props

    if (!auth.isProcessing && this.setSubmitting) {
      this.setSubmitting(false)
    }
  }

  onSubmit = (values, { setSubmitting }) => {
    const { dispatch } = this.props

    dispatch(login(values)))
    this.setSubmitting = setSubmitting
  }

  render() {
    const { auth } = this.props
    if (auth.user.uid) {
      return <Redirect push to="/" />
    }

    return (
      <div className="login-panel">
        <h1>Login</h1>

        <Formik
          initialValues={initialValues}
          onSubmit={this.onSubmit}
          render={LoginForm}
          validationSchema={validationSchema}
        />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  auth: state.auth,
})

export default connect(mapStateToProps)(LoginPage)

How can I do it in a more "elegant" way ?

You could implement callbacks. Just invoke an onSuccess or onError callback in your middleware and handle them in your component.

// component.js
class LoginPage extends Component {

  // ...

  onSubmit = (values, { setSubmitting }) => {
    const { dispatch } = this.props

    setSubmitting(true);
    dispatch(
      login(
        values,
        () => setSubmitting(false), // success callback to be invoked in middleware
        (message) => { // error handler invoked in middleware catch
          this._handleErrorMessage(message);
          setSubmitting(false);
        },
      )
    );
  }


}

// actions.js
function loginAction(payload, onSuccess, onError) {
  return {
    type: LOGIN,
    payload,
    onSuccess,
    onError,
  }
}

// middleware.js
function handleLogin(action) {
  const { payload, onSuccess, onError } = action;
  try {
    // login...
    onSuccess('hurray!');
  } catch(error) {
    const { message } = error;
    onError(message);
  }
}

How to run setSubmitting() outside the submit handler?, So I won't be able to use Formik's setSubmitting (to set the isSubmitting flag to false) setSubmitting = setSubmitting } render() { const { auth } = this.props if  To submit a form in Formik, you need to somehow fire off the provided handleSubmit(e) or submitForm prop. When you call either of these methods, Formik will execute the following (pseudo code) each time: Pre-submit. Touch all fields. initialValues are required and should always be specified. See #445; Set isSubmitting to true; Increment submitCount + 1; Validation

Another approach is by using ref on to the <Formik/> component (released in React 16.3)

class NewComponent extends Component {
  formikRef = React.createRef()

  render() {
    <Formik
      ref={this.formikRef}
      ..
      ..
    />
  }

  onButtonClick() {
    this.formikRef.current.setSubmitting(false);
  }
}

How to run setSubmitting() outside the submit handler?, So I won't be able to use Formik's setSubmitting (to set the isSubmitting flag to false ) inside the submit handler, like the code samples on  So I won't be able to use Formik's setSubmitting (to set the isSubmitting flag to false) inside the submit handler, like the code samples on Formik docs and other tutorials I've found. I've solved the issue in a kinda ugly way, saving a reference of setSubmitting to run it later, inside componentDidUpdate :

If the Formik component could accept isSubmitting as prop, then it could be implemented much more elegantly. Right now it doesn't (see source). This would be a great feature request to the Formik team.

How to run setSubmitting() outside the submit handler , Want to run setSubmitting() outside the submit handler? You could implement callbacks. Just invoke an onSuccess or onError callback in your  brettinternet. I like the internet. I love this site. 7. answers. 1. question ~10k. people reached. 6 How to run setSubmitting() outside the submit handler? Nov

Form Submission · Formik, To submit a form in Formik, you need to somehow fire off the provided handler (​i.e. onSubmit or handleSubmit ); you call setSubmitting(false) in your handler to  Meta Stack Overflow your communities . Sign up or log in to customize your list. more stack exchange communities company blog. By using our site, you

setSubmitting not working · Issue #1957 · jaredpalmer/formik · GitHub, If the submit handler is not a promise it resolves immediately. property is automatically set back to false without calling setSubmitting() #1985 an opportunity to transition away. From a strictly selfish perspective, I'd hate to have to refactor you call setSubmitting(false) in your handler to finish the cycle. Submit handler. This should be passed to <form onSubmit={props.handleSubmit}></form>. To learn more about the submission process, see Form Submission. isSubmitting: boolean. Submitting state of the form. Returns true if submission is in progress and false otherwise. IMPORTANT: Formik will set this to true as soon as submission is attempted.

How to run setSubmitting() outside the submit handler?, So I won't be able to use Formik's setSubmitting (to set the isSubmitting flag to false ) inside the submit handler, like the code samples on Formik docs and other​  onSubmit is a prop that takes a function when we click Submit. All we do is show an alert box with the values that are inputted to keep things simple for this example. The setSubmitting prop is a function that's called to let Formik know if we're submitting or not. If we’re done, then we pass in false to setSubmitting as we did above.

Comments
  • Nice! Just did a little tweak, putting the callbacks inside a meta attribute, to make the action FSA compliant.
  • @MatheusGomes Nice! I like that idea.