CODEWITHSUNDEEP
reactjsformik
Profer
Profer

Reputation: 643

How to disable button on submit form in formik?

I have a form in my react component with handleSubmit. What I need to do is when I submit the form(on save click) the save button automatically should get disabled and when I get the response it automatically gets enabled.

  handleSubmit = async({ company, email }, { setSubmitting, setErrors }) => {
    setSubmitting(true)
    const { value: { status, message } } = await this.props.createCompany({ name: company, email })
    if (status) {
      this.fetchCompanies()
      this.closeModal()
    } else {
      setErrors({ email: message })
    }
  }

    <Formik
      initialValues={loginDetails}
      validationSchema={loginSchema}
      onSubmit={(values, formikProps) => this.handleSubmit(values, formikProps)}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting
      }) => (
        <form onSubmit={handleSubmit}>
          <div className="col-md-12">
            <div className="form-group material-textfield">
              <input type="text" name="email" value={values.email} onChange={handleChange} className="form-control material-textfield-input"/>
              <ErrorMessage component="span" name="email" className="invalid-feedback d-block"/>
              <label className="material-textfield-label">Email<span>*</span></label>
            </div>
          </div>
        <button type="submit" className="btn btn-dark btn-lg w-100" disabled={isSubmitting}>Save</button>
        </form>
      )}
    </Formik>

And for this I have used setSubmitting function from formik. But it doesn't work.

Kindly help.

Upvotes: 4

Views: 10822

Answers (2)

uNrANK3D
uNrANK3D

Reputation: 11

#You can disable the button with **formik.isSubmitting** or **formik.errors** #

<Formik
                initialValues={{
                    email: '',
                    password: '',
                }}
                validationSchema={Yup.object({
                    email: Yup.string().email('Invalid email address').required('Required'),
                    password: Yup.string().required('Required'),
                })}
                onSubmit={(values, { setSubmitting }) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2));
                        setSubmitting(false);
                    });
                }}
            >
                {(formik) => (
                    <Form>
                        <h1>Login</h1>
                        <Field type='email' name='email' />
                        <br />
                        <ErrorMessage name='email' />
                        <br />
                        <Field type='password' name='password' />
                        <br />
                        <ErrorMessage name='password' />
                        <br />
                        <button disabled={formik.isSubmitting || formik.errors}>Login</button>
                    </Form>
                )}
            </Formik>

Upvotes: 0

viniciusalvess
viniciusalvess

Reputation: 814

This should help:

const onSubmitHandler = (values, formik) => {
        persistYourData(values).then(r => {
            formik.setSubmitting(false);            
        }).catch(error => console.log(error));
    }
...
<Button variant="contained" color={"primary"} onClick={pr.handleSubmit} disabled={ ((!(pr.isValid && pr.dirty)) || pr.isSubmitting) }>Submit</Button>

Upvotes: 1

Related Questions