Formik - how to access an error message inside an array using Yup validation?

0
votes

I'm building a form with validations using Formik and Yup, sending specific error messages on missing fields. One of the fields (question) is and array of objects, and I'm can't find a way to access each individual error message.

I've created a validationSchema, but when I try to pass the array index on Formik error prop, I get an error.

Here's a sandbox with an abstraction of the whole form. In this example, it only work if I comment the second label field, but in a normal situation this must be dynamic:

https://codesandbox.io/s/0ov0vxmom0?fontsize=14

I figured out this happens because, when the form is rendered, the error object is empty by default. So if I pass the first index [0], when the object get an error, Formik is able to access it. If I get and error on the next field, for example, Formik would try to access the error on index[1], but the error object would have just index [0]. I must pass exactly the error position because my form could have multiple questions. Any tips?

1
reactjsformikyup

1 Answers

0
votes

If you are checking based on the object type you can add .typeError(msg) at the end of each Schema.

Ex.

 Yub.object().typeError('Invalid Object');
 Yub.array().typeError('Invalid Array');