When I enter the screen, there's no error displayed on the input field. In my Formik 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 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') .max(70, 'Too Long!') .min(3, 'Too Short!'),});
How can I erase/reset the error along with the form?
setErrors is not making any difference here.