How to reset the form after submit or after clicking on cancel button using formik

Question

const TextForm: React.FunctionComponent<Props> = (props) => { 

const formError = yup.object({
    name: yup.string().required("Required"),
  });
      const formValidation = (fieldName) => {
        return {
          invalid: !!form.errors[fieldName] && form.touched[fieldName],
          invalidText: form.errors[fieldName],
          onBlur: form.handleBlur,
        };
      };  
 const form = useFormik({
        initialValues: {
          name,
          id,
        },
        formValidation
        formError,
        validateOnChange: true,
        validateOnMount: true,
        initialTouched: {},
      });
  
    return(
    <React.Fragment>
    <form>
     <TextInput
                        id="text-input-2"
                        {...validation("name")}
                        type="text"
                        name = "name"
                        onChange={(event) => {
                          setName(event.target.value);
                          form.handleChange(event);
                        }}
                      />
    <TextInput
                        id="text-input-2"
                        {...validation("id")}
                        type="text"
                        name = "id"
                        onChange={(event) => {
                          setId(event.target.value);
                        }}
                      />
    <Button>Clear</Button>
    <Button>Submit</Button>
    </form>
    </React.Fragment>
    ) 
    }

Validations in my form are working fine. But if user does not enter any field, it comes with required warning. I am trying to clear/reset the form on Clear button click ,but could not find any possible solution working. Can anyone help me with this.

For the clear button you could try specifying the button type `type="reset"`. If no type attribute is specified for a button then `type="submit"` is the default type. — Drew Reese, Aug 22 '20 at 18:00
I have tries type = "rest but it wont reset the form. Resetting the form means I want the fresh form and clear all its states. I am not sure hwo to use onReset or resetForm using formik — Singh, Aug 22 '20 at 18:04
Your snippet doesn't have *any* button types specified. Please update snippet to be the *actual* code with issue, otherwise we're just guessing as to what the issue may be. — Drew Reese, Aug 22 '20 at 18:05
As @DrewReese mentioned try it will work. for more info https://stackoverflow.com/questions/55583815/formik-how-to-reset-form-after-confirmation#:~:text=what%20resetForm%20can%20do%3F,what's%20passed%20as%20an%20argument. — Sheelpriy, Aug 22 '20 at 18:11
Checkout this answer, might help - https://stackoverflow.com/a/56180883/5032733 — Shivkumar Reddy, Aug 16 '22 at 17:52

score 5 · Answer 1 · answered Aug 22 '20 at 18:14

5

A quick search of the Formik docs.

The Formik onSubmit and onReset are passed formikBag as their second argument, of which contains the resetForm action. The resetForm callback can be destructured from this formikBag object and used within your callback.

onSubmit onReset

const form = useFormik({
  initialValues: {
    name,
    id,
  },
  formValidation
  formError,
  validateOnChange: true,
  validateOnMount: true,
  initialTouched: {},
  onSubmit: (values, { resetForm }) => {
    // submission logic
    resetForm();
  },
  onReset: (values, { resetForm }) => resetForm(),
});

You also just need to ensure your form buttons have the correct button types so the form takes the correct action when clicked.

answered Aug 22 '20 at 18:14

Drew Reese

165,259
14
153
181

Thanks.That's really helpful , but is there any way to reset the form without setting the button type as reset? I have my form in the Modal. And I dont have access to the buttons which comes with the modal. – Singh Aug 22 '20 at 18:51
@Singh Hmm, this is really just how `form` and `button` elements work in semantic HTML (*for obvious accessibility reasons*). In your snippet the buttons are part of the form, you *should* have a bit of control over them (assuming the `Button` is designed/implemented in a reasonable manner). – Drew Reese Aug 22 '20 at 19:02
@Singh If you are able to update your question with how the form is used within your modal code we may be able to come up with a solution. – Drew Reese Aug 22 '20 at 19:14

How to reset the form after submit or after clicking on cancel button using formik

1 Answers1