提交表单后删除 Formik 错误消息

Question

Upon entering my screen, there's no error displayed on the input field.

In my form, I take an input and run a graphql mutation on it. Once it's done, I reset the form. However, after resetting, I start seeing a Formik Error because the field is .required() and currently it's empty.

This error should only be shown when I am trying to submit the form without an input. It shouldn't show after I have submitted it once successfully.

  const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {
    editLocationName({
      variables: {
      favouritePlaceId: route.params.id,
      input: {customisedName: values.locationName}
      },
    });
    helpers.resetForm();
    helpers.setErrors({});
  };
.....


          <Formik
            initialValues={initialValues}
            onSubmit={handleSubmitForm}
            validationSchema={validationSchema}>
            {({ handleChange, handleBlur, handleSubmit, values }) => (
              <View style={styles.searchFieldContainer}>
                <View style={styles.form}>
                  <FieldInput
                    handleChange={handleChange}
                    handleBlur={handleBlur}
                    value={values.locationName}
                    fieldType="locationName"
                    placeholderText="Neuer Name"
                  />
                  <ErrorMessage
                    name="locationName"
                    render={(msg) => <ErrorText errorMessage={msg} />}
                  />
                </View>
                <View style={styles.buttonContainer}>
                  <ActionButton buttonText="Save" onPress={handleSubmit} />
                </View>
              </View>
            )}
          </Formik>

Validation Schema:

const favouriteLocationNameValidationSchema = yup.object().shape({
  locationName: yup
  .string()
  .label('locationName')
  .required('Required Field')
});

How can I reset the error message along with the form?

setErrors({}) did not work for me.

Answer 1

Adding it here, because suggestion requires code . Add following code and let me know if it helped.

helpers.resetForm({
 errors: {},
 touched: {}
});

Remove helpers.setErrors({});