Formik , how to reset dirty property

user_7234678 0
Viewed 4110

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();  
};
formik reactjs
2 Answers

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 });  
};
user_5044740

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")
user_114510170
Related