Formik - How to reset form after confirmation

Question

In Formik, how to make the Reset button reset the form only after confirmation?

My code below still resets the form even when you click Cancel.

var handleReset = (values, formProps) => {
    return window.confirm('Reset?'); // still resets after you Cancel :(
};

return (
  <Formik onReset={handleReset}>
    {(formProps) => { 
      return (
        <Form>
          ...
          <button type='reset'>Reset</button>
        </Form>
      )}}
  </Formik>
);

Answer 1

Hello @Aximili you can use resetForm in onSubmit.

onSubmit={(values, { resetForm }) => {

      // do your stuff 
      resetForm();

}}

what resetForm can do?

Imperatively reset the form. This will clear errors and touched, set isSubmitting to false, isValidating to false, and rerun mapPropsToValues with the current WrappedComponent's props or what's passed as an argument. The latter is useful for calling resetForm within componentWillReceiveProps.

Answer 2

I'm not completely certain, but I think you will have to write your own reset function without a button with a reset type. Something like this:

const handleReset = (resetForm) => {
  if (window.confirm('Reset?')) {
    resetForm();
  }
};

function Example() {
  return (
    <Formik initialValues={{ value: 1 }}>
      {formProps => {
        return (
          <Form>
            <Field name="value" type="number" />
            <button
              onClick={handleReset.bind(null, formProps.resetForm)}
              type="button"
            >
              Reset
            </button>
          </Form>
        );
      }}
    </Formik>
  );
}

If you really want to use onReset, I think the only way is to throw an error. The Formik source code seems to indicate resetForm() will be called no matter what your onReset() function returns.

const handleReset = () => {
  if (!window.confirm('Reset?')) {
    throw new Error('Cancel reset');
  }
};

function Example() {
  return (
    <Formik initialValues={{ value: 1 }} onReset={handleReset}>
      {formProps => {
        return (
          <Form>
            <Field name="value" type="number" />
            <button type="reset">
              Reset
            </button>
          </Form>
        );
      }}
    </Formik>
  );
}

I would still go with the first solution though personally.

Answer 3

I understand OP's question was for Formik.

However, for anyone using useFormik hook and wanting to clear form on 'reset' button click, here's one way to achieve that.

<button type="reset" onClick={ e => formik.resetForm()}> Reset</button>

Answer 4

in 2023 formik.resetForm(); this worked for me.

here is the complete code for onSubmit event

  onSubmit:(values)=>{
const name = values.name;
      const mobile = values.mobile;
      const website = values.website;
      const service = values.service;
      const msg = values.msg;
  
axios.post('/api/SendContactForm', {name, mobile, website, service, msg})
      .then(function (response) {
           //console.log(response);
              toast.success(' Thanks for the message. We will contact you asap.');
              formik.resetForm();
          })
          .catch(function (error) {
            console.log(error);
            formik.resetForm();
            toast.error(error.message || error.statusText);
          });
     
  
      }
  
  });

Answer 5

Here is the solution:

<Formik
initialValues={initialValues}
onSubmit={async (values, { resetForm }) => {
  await onSubmit(values)
  resetForm()
}}>

Reset the form on submit immediately.

I'm not using a custom wrapper around Formik.

Answer 6

My issue was I did not wanted to use window.confirm(). I wanted to use my own modal so I used

useFormikContext()

You can create a function component like this

let resetPresForm = {};// You will have to define this before useEffect

const ResettingForm = () => {
    const { resetForm } = useFormikContext();
    resetPresForm = resetForm; // Store the value of resetForm in this variable
    return null;
};

Now Import this function component inside your

<Formik>
     <button type="button" onClick={() => { setShowResetModal(true) }} className="comman-btn">Reset</button>
     <ResettingForm />
</Formik>

Now on modal component confirm you can

const resetPrescriptionForm = () => {
    setShowResetModal(false);
    resetPresForm();
}

Reference

Answer 7

I used actions.resetForm() and It resolved the problem.

onSubmit={(values, actions) => {

     actions.resetForm();

}}

Answer 8

     onSubmit: async (values, actions) => {
    actions.resetForm();
  },

You must add two parameters and use second parameter. So you can try actions.resetForm();

Answer 9

In my case I created a Formik event of onReset={handleFormReset} & inside form props, passed handleReset for onReset event of form like this-

            <Formik
            onSubmit={handleFormSubmit}
            initialValues={initialValues}
            validationSchema={checkoutSchema}
            onReset={handleFormReset}
        >
            {({
                values,
                errors,
                touched,
                handleBlur,
                handleChange,
                handleSubmit,
                handleReset
            }) => (
                <form onSubmit={handleSubmit} onReset={handleReset}>

Then I created a button with type='reset', like

<Button type="reset" color="warning" variant="contained" sx={{ mr: 3 }}>
   Reset
</Button>

Finally, I created the handler function handleFormReset(values), where I emptied the values object if user confirms inside a confirm box.

    const handleFormReset = values => {
    if (window.confirm("Do You Want To Reset?")) {
        values = {};
    }
};