How to disable button on submit form in formik?

Question

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.

viniciusalvess · Accepted Answer · 2020-09-05 05:10:01Z

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>

uNrANK3D · Accepted Answer · 2021-03-21 07:44:48Z

#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>

Collectives™ on Stack Overflow

How to disable button on submit form in formik?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related