CODEWITHSUNDEEP
reactjsreact-nativeformikyup
Waweru Kamau
Waweru Kamau

Reputation: 1489

How to show an alert with errors found after submitting Formik form in react native

I have a Formik form in react native and a Yup validationSchema. When user submits form I want to create an alert with the error fields if there are fields that are invalid.

Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1",

I have tried using isValid inside the Formik render and create an Alert with errors, but I get an empty errors object. However if I submit again/or click submit twice, the error object contains the invalid fields as expected.

How can I get the errors object on first submit?

Upvotes: 6

Views: 10274

Answers (3)

Muhammad Mubashirullah Durrani
Muhammad Mubashirullah Durrani

Reputation: 1145

Here is an exact answer

        </FieldArray>
        {/* <ErrorMessage name="_action" component="div" /> */}
        <ErrorMessage name="_action">
          {
          (errorMsg) => {
            alert(errorMsg);
            return  <div className="text-danger">{errorMsg}</div>
        }
          }
        </ErrorMessage>

I don't need to mention where to add the error part right? :D

Upvotes: 0

Vencovsky
Vencovsky

Reputation: 31635

What you should do is have a modal or something like that that will show the errors.

When using Formik that component that you render (you can use component, render and also children) will recieve the prop with the errors as you can see in the example from the docs.

<Formik>                              {// getting the errors here }
  {({ handleSubmit, handleChange, handleBlur, values, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.name}
        name="name"
      />
      {errors.name &&
        <div>
          {errors.name}
        </div>}
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

errors will be an object so you check for the keys (or you can also use values) of errors and decide if you will render you error modal or not.

<Formik
    validationSchema={yourValidationSchema}
    onSubmit={whatYouWantTodoWhenEverythingIsGood}
    initialValues={{ email: '' }}
>                                 
    {({ errors, values, handleChange, handleBlur}) => (
        <View>
            <TextInput
                onChangeText={handleChange('email')}
                onBlur={handleBlur('email')}
                value={values.email}
            />
            <Button onPress={props.handleSubmit} title="Submit" />
            {// checking if you have errors}
            {
                Object.keys(errors).length > 0 && 
                    <Modal errors={errors}/>
            }
        </View>
  )}
</Formik>

Depending where your modal is from, you can use <Modal isActive={Object.keys(errors).length > 0} errors={errors}/> or other things like that.

e.g. using react-native modal

<Modal
    visible={Object.keys(errors).length > 0}
>
        <View>
            {// show the errors the way you want}
        </View>
</Modal>

You should use Object.keys(errors).length > 0 to decide if you should show the modal with errors or not.

Upvotes: 4

loQ
loQ

Reputation: 2136

This is because the touched object isn't updated when clicking the submit button when you are in RN. Try setting blank values as an initial values to your fields that has a validation schema. Something like this:

initialValues={{ input_1: "", input_2: "" }}

This answer from the formik git repo helped me.

Upvotes: 1

Related Questions