3

When I open the screen, I don't see any validation error until I first submit the form. Once the email address is entered correctly and the form is submitted by hitting the button, the form logic works correctly. An alert is shown & the field is reset (intentional)

However, once I close the the alert, Formik still shows me an error that I must enter an email address (required field). Is it possible to reset the error too? Just like it was when I first opened the screen? I want this error to appear only when I am submitting the form without typing something.

enter image description here

Snippets of my code:

Resetting the value here:

 const initialValues: FormValues = {
    email: '',
  };


const handleSubmitForm = React.useCallback(
    (values: FormValues, helpers: FormikHelpers<FormValues>) => {
      console.log('Submitted');
      loadUsers({
        variables: {
          where: { email: values.email },
        },
      });
      values.email = '';
    },
    [loadUsers],
  );

 <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.email}
                        fieldType="email"
                      />
                      <ErrorMessage 
                        name="email"
                        render={(msg) => ( 
                          <Text style={styles.errorText}>
                            {msg}
                          </Text>
                        )}
                      />
                    </View>
                    <View style={styles.buttonContainer}>
                      <Button
                        rounded
                        style={styles.button}
                        onPress={handleSubmit}>
                        <Text style={styles.text}>
                          Add Friend{' '}
                        </Text>
                      </Button>
                    </View>
                  </View>
                )}
              </Formik>

1 Answers1

1

You can use the setFieldError or setErrors.

I'm not sure where exactly you want to clear the error, but if isn't inside the form, you can get a ref of the formik component and call setFieldError or setErrors.

e.g. 

setFieldError('email', undefined)

Other observations about your code that isn't related to the question

Doing values.email = ''; isn't a good thing, if you want to reset the value of email you should use setFieldValue, just like you will use setFieldError.

e.g. 

helpers.setFieldValue('email', '')
Vencovsky
  • 28,550
  • 17
  • 109
  • 176
  • setFieldError and setErrors can only be used within the Formik wrapper right? If I pass them along with handleSubmit, values etc..Will that reset the error? –  May 11 '20 at 17:37
  • @a125 you can use `setFieldError` and `setErrors` outside the formik wrapper as I said in my answer. If you are confused in how to get the `ref` and call `setFieldError`, you can take a look at [this answer](https://stackoverflow.com/questions/49525057/react-formik-use-submitform-outside-formik) where it shows how to call `handleSubmit`. In you case is the same, but instead of `handleSubmit`, you will call `setFieldError`. – Vencovsky May 11 '20 at 17:41