React Formik Tutorial - 30 - Reset Form Data

📱 Follow Codevolution

Reset form data in React with Formik

[itszahoor]

Lucky to have watched all Formik Concepts (30 videos) in one sitting. When I started the playlist there were 28 videos, the 29th, 30th arrived while I was watching. What a coincidence. Thanks Vishwas :-)

[dand]

Love the videos Vishwas has done. Being new to most of this, some reason i couldn't get the reset form working. Not sure if it might be from changes in Formik or not. Given we have the formValues after building stuff up, just seems more intuitive to go with the flow? Might be 6 or a half dozen, for me simply having the reset button of type 'reset', the reset wasn't working for me, just thought ah just make a local function on click and in there just call the hook set method for the form values. i.e.:

<button type='reset'

Additionally the resetting/clearing the form in onSubmit() wasn't working for me either and changed from:


onSubmitProps.resetForm();

To be:


setFormValue(null);

Thinking about it there might be a couple extra calls with what i'm doing but it works, possibly more explicit too... And fixes the issue if i used "LoadSavedData" as it appears for some reason reset won't work after using the load button, but all works with how i updated all... :)

[ahmadsaleh]

In case of loading saved values, you need to set the setFormValues to null on submitting or manually via a button
const [formValues, setFormValues] = useState(null)
const onSubmit = (values, props) => {
// Some logic
setFormValues(null)
props.resetForm()
}

Note: the onSubmit method cannot live outside the scope of Formik component function. Otherwise, the setFormValues will be undefined

[Sokrplyr]

There appears to be an issue if you use the Load Saved Data from the previous video along with the reset. Because the form initialValues is changed to savedValues within the form, resetting just sets it back to the original saved values. But what if I load the saved data and want to completely reset the data? Or when I submit the form when using the savedValues, submit just returns the form back to the savedValues. Do I just have to add the onclick of setFormValues(initialValues) on the reset/submit buttons or is there another way to handle that action?

[AlecHalePletka]

Great series. Looking forward to the next one!

[Alex_Delina]

Vishwas, please show how to validate dynamic form. Thank you!

[gisellesmith]

Hi - my submit button stops working when I reset the form. Any ideas why that happens?

[AtomiCoding]

Sir please Help how to reset the value of file or image input fields

[freesh]

If you are using the deactivated submit button, you have to revalidate the form after reset. Otherwise the submit button isn't deactivated.

[Anonymous-zwpy]

I am a big fan of yours and I have received a lot of valuable knowledge from you. I really want to support you but I don't use paypal so please tell me what else can I do <3 <3 <3

[divyamishra]

as we see, on submitting the form, the form gets reset automatically. what if i want to reset form only when i explicitly click on reset. Basically I don't want the form to reset when i click on submit. Kind of like a filter, i want the value set in field when i open the form again..Any suggestions on that?

[hoanglongpham]

i see a lots of drawbacks in this video, it just delete data when we fill. if we use "Load save data" button, then we press reset button, it doesn't work. please explain this case. and how make it work???

[Wakkyguy]

When I reset the form using the reset button, it does not reset to the initial values. Instead it resets to the empty values for all the form fields. How to fix this?

[PanZabicom]

reset type button is not working inside of fromik form

[kimayapanash]

Yaar radio button submit form pr reset nahi ho rahe