javascript - How to reset the form after submit or after clicking on cancel button using formik - Stack Overflow

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 es 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.

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 es 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.

• javascript
• reactjs
• typescript
• formik

Share Improve this question Follow asked Aug 22, 2020 at 17:52 SinghSingh 20722 gold badges55 silver badges2020 bronze badges 5

• 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 Commented Aug 22, 2020 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 Commented Aug 22, 2020 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 Commented Aug 22, 2020 at 18:05
• As @DrewReese mentioned try <Button type="reset">Reset </Button> it will work. for more info stackoverflow./questions/55583815/…. – Sheelpriy Commented Aug 22, 2020 at 18:11
• Checkout this answer, might help - stackoverflow./a/56180883/5032733 – Shivkumar Reddy Commented Aug 16, 2022 at 17:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.