Formik resetting form to initial values

Question

I am using Formik and have the following setup below where I want to be able to reset the form when the user presses the "Cancel" button. On return to the form, all form values should be reset to initialValues which are all nulls.

        <Formik
          enableReinitialize
          initialValues={{ 
            ...INITIAL_FORM_STATE
          }}
          validationSchema={ FORM_VALIDATION }
          onSubmit={handleSubmit}
        >
          {({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, resetForm }) => (

          <Form>
             .....

I have the following code for the Cancel button:

                  <Button
                      text="Cancel"
                      startIcon={<UndoIcon />}
                      variant="contained"
                      color="default"
                      className={classes.buttons}                          
                      component={Link} 
                      to={'/home'}
                      onClick={() => { 
                          {resetForm}
                          setMenu("Home")
                      }}
                  />            

After entering some text into a form field and pressing the Cancel button, which directs me back to the Home page, I then go back to the form and notice that my text is still in state within the form and not resetting.

Can anyone please assist with what I am missing.

Chantey

Make sure you have value attribute written in each element. – Tardiff

Answer 1

              <Button
                  text="Cancel"
                  startIcon={<UndoIcon />}
                  variant="contained"
                  color="default"
                  className={classes.buttons}                          
                  component={Link} 
                  to={'/home'}
                  onClick={() => { 
                      resetForm()
                      setMenu("Home")
                  }}
              />

You should use the resetForm() as a function call

Lineal

I tried that and unfortunately this didn't solve my issue. Still not resetting. – Chantey

Answer 2

`

const myForm = useFormik({
    initialValues:{ 
    value1:'',
    value2:''
    },
    onSubmit:( values ) = >{
     //submit data 
     ........

     //reset form after submit
     myForm.resetForm()
    }
)

on return

 <form onSubmit={myForm.submit}>
     ........
     <Button type="submit"/>
     <Button onClick={()=>myForm.resetForm()}>Reset</Button>
    </form>

`

Shirelyshirey

Answer 3

you just need to set values of the input boxes to formik values:

<Formik
          enableReinitialize
          initialValues={{ 
            ...INITIAL_FORM_STATE
          }}
          validationSchema={ FORM_VALIDATION }
          onSubmit={handleSubmit}
        >
          {({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, resetForm }) => (
<input value={values.propertyName}/>
          <Form>        

and now resetForm should work well

Catfall

Answer 4

You must change values through values since you dont have access to resetForm from the button.

<Button
text="Cancel"
startIcon={<UndoIcon />}
variant="contained"
color="default"
className={classes.buttons}                          
component={Link} 
to={'/home'}
onClick={() => { 
    values = {
     someProperty: null,
    }
}}
/>     

Lavonda

Answer 5

As as I see your are using Material UI. I notice that you have a "to" property in your Button component I think you have to decide either remaining on the same page and reset your form or redirecting to another page. If you want to remain on the same page I would suggest you to get rid of it because this causes some conflict. You can implement it like this:

  return (<Formik
  enableReinitialize
  initialValues={{ 
    ...INITIAL_FORM_STATE
  }}
  validationSchema={ FORM_VALIDATION }
  onSubmit={(values, actions) => {
       actions.setSubmitting(false);
       console.log("Submit form", values);
   }}
>
  {({ values, errors, isSubmitting, isValid, setFieldValue, handleChange, handleSubmit, resetForm }) => (

  <Form onSubmit={handleSubmit}>
  ..... some inputs
  <Button
                  text="Cancel"
                  startIcon={<UndoIcon />}
                  variant="contained"
                  color="default"
                  className={classes.buttons}
                  component={Link}                          
                  onClick={() => handleReset(resetForm)}
              />
  </Form>
   )}
  </Formik>
  );

And inside you class create a handleReset method:

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

Fogbound