CODEWITHSUNDEEP
reactjsformik
Yerlan Yeszhanov
Yerlan Yeszhanov

Reputation: 2439

Formik , how to reset dirty property

I have multistep form application. On first page user fills form . Second page is a confirm page where user checks all data or he can edit them, returning back to the first page. On forms page I have disabled submit button , until it passes all validation rules

           <Button
              type="submit"
              disabled={!(formik.isValid && formik.dirty)}
              onClick={() => {
                dispatch(sendSms()).then(() => {
                  setModal(true);
                });
              }}
            >
              Продолжить
           </Button>

So the problem is when I'm returning back , sumbit button is disabled. I need to set dirty property "true" . How to make it?

 <Formik
    initialValues={formValues || initialValues}
    validationSchema={validationSchema}
    enableReinitialize
    onSubmit={onSubmit}
    onChange={onSubmit}
    validateOnMount={true}
  >

const onSubmit = (values, submitProps) => {
  setFormValues(values);
  submitProps.resetForm();  
};

Upvotes: 14

Views: 18066

Answers (2)

CristianR
CristianR

Reputation: 489

In Formik, dirty is a readonly computed property and should not be mutated directly. It returns true if values are not deeply equal from initial values. So You need to add another dirty value(but not Formik dirty). Or you can just set the Formik value by manually to set Formik dirty as true, like

formik.setFieldValue("name", "New Name")

Upvotes: 2

Kostiantyn Ko
Kostiantyn Ko

Reputation: 2736

You were close. Here's how it should work the way you want it.

const onSubmit = async (values, submitProps) => {
  // Do your stuff that handles submission
  // ...

  // When you consider your submission a success, run the below code.
  // Mind the "values".
  submitProps.resetForm({ values });  
};

Upvotes: 19

Related Questions