Formik: Showing errors coming from an API

Created on 17 Aug 2017  路  2Comments  路  Source: formium/formik

Hey guys, I'm having some trouble maybe you can help me.
I validate some info on the backend, if some field has an error I use setError.
But sometimes I get "general" errors, so I show them all together like this:

ValidateInfo(payload)
      .then((response) => {
        // do some cool stuff
      })
      .catch((errors) => {
        console.error("Errors: ", errors);
        //here I set the "general" errors
        setErrors({ errorsArray: errors });
      });

Everything work ok, as I use

  validateOnChange: true,
  validateOnBlur: false,

When I change something in the fields, the error get cleared. Do you know if there is a way to keep the error until I send it again?.

Thanks,
Dami谩n

Most helpful comment

You can use the status field to hold general errors. It's an all-purpose escape hatch -- usually I store general errors in it, sometimes I store success messages in it.

Try this instead:

      .catch((errors) => {
        console.error("Errors: ", errors);
        //here I set the "general" errors
        setStatus({ errorsArray: errors });
      });

Then in your form render you can reference props.status.errorsArray

All 2 comments

You can use the status field to hold general errors. It's an all-purpose escape hatch -- usually I store general errors in it, sometimes I store success messages in it.

Try this instead:

      .catch((errors) => {
        console.error("Errors: ", errors);
        //here I set the "general" errors
        setStatus({ errorsArray: errors });
      });

Then in your form render you can reference props.status.errorsArray

Thank @eonwhite! I't did the trick!

Was this page helpful?
0 / 5 - 0 ratings