Handle multiple errors returned by Yup

🚀 Feature request

When Yup returns a ValidationError aggregating multiple errors I’d like Formik to list all aggregated errors.

Current Behavior

Currently if Yup returns ValidationError then its message is shown.

Desired Behavior

With following validation:

clinicalFiles: Yup.array()
      .min(10, 'We expect you to provide 10 files')
      .max(10, 'We expect you to provide 10 files')
      .test('valid-domains', 'Domains are invalid', function (value: File[]) {
        let errors = validateFileNames(value.map(f => f.name));

        if (errors.length > 0) {
          let ve = this.createError({ message: 'Error that is shown' });
          ve.errors = errors; // these are not shown
          return ve;
        }

        return true;
      })

I’d expect Formik to show all aggregated errors.

Suggested Solution

If ValidationError ve packs other errors then show all of them, instead of just ve.message

Who does this impact? Who is this for?

Ppl using Yup validations (which are recommended by Formik)

Describe alternatives you’ve considered

Concatenating all errors:

      Yup.array().test('valid-domains', 'Domains are invalid', function (value: File[]) {
        let errors = validateFileNames(value.map(f => f.name));

        if (errors.length > 0) {
          return this.createError({ message: errors.join(". ") });
        }

        return true;
      })

[LyricL-Gitster]

Expanding on @dieguezz, this will give you a full validate method for a schema until such time that we can pass schema options to Formik:

const fullValidatorForSchema = (schema) => (values) => schema.validate(values, {
  abortEarly: false,
  strict: false,
}).then(() => ({})).catch(({inner}) => inner.reduce((memo, {path, message}) => ({
  ...memo,
  [path]: (memo[path] || []).concat(message),
}), {}))

So you can:

<Formik validate={fullValidatorForSchema(YupValidationSchema)} {...otherProps} />

And, then your Formik errors will be an array of all of the error messages.

[dieguezz]

You can do it programmatically. Instead of using validationSchema use validate and the validateFunction should look something like this:

export function validateSchema(values, schema) {
  return schema
    .validate(values, {
      abortEarly: false,
      strict: false,
    })
    .then((res) => {
      return {}
    })
    .catch(mapYupToFormikErrors)
}

and do something like

validateSchema(values, schema)