Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Formik - How to reset form after confirmation

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> ); 
like image 275
Aximili Avatar asked Apr 09 '19 01:04

Aximili


People also ask

How do I reset my form after I submit Formik?

We can reset the form by using the resetForm() method of formik. We can register it on the onClick event of the reset button.

How do you reset a specific field in Formik?

If you want to reset the selected value after the form is submitted, you need to provide a controlled value for the Select component. The Formik Field component provides the value in the props object, so you can use it.

How do you clear a form in React?

The reset() method restores a form element's default values. Regardless of how many uncontrolled input fields your form has, a single call to the reset() method clears all of them. Alternatively, you can clear the values by setting the value property of each ref to an empty string.

What is Formik dirty?

Returns true if values are not deeply equal from initial values, false otherwise. dirty is a readonly computed property and should not be mutated directly.


Video Answer


1 Answers

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.

like image 64
patelarpan Avatar answered Sep 22 '22 05:09

patelarpan