Optionally show multiple validation errors per field

src/Formik.tsx

@@ -10,6 +10,7 @@ import {
   FormikProps,
   FieldMetaProps,
   FieldInputProps,
+  ValidationSchemaOptions,
 } from './types';
 import {
   isFunction,
@@ -122,6 +123,7 @@ function useFormikInternal<Values = object>({
   isInitialValid,
   enableReinitialize = false,
   onSubmit,
+  validationSchemaOptions = { showMultipleFieldErrors: false },
   ...rest
 }: FormikConfig<Values>) {
   const props = { validateOnChange, validateOnBlur, onSubmit, ...rest };
@@ -202,12 +204,12 @@ function useFormikInternal<Values = object>({
             resolve(emptyErrors);
           },
           (err: any) => {
-            resolve(yupToFormErrors(err));
+            resolve(yupToFormErrors(err, validationSchemaOptions));
           }
         );
       });
     },
-    [props.validationSchema]
+    [props.validationSchema, validationSchemaOptions]
   );
 
   const runSingleFieldLevelValidation = React.useCallback(
@@ -837,14 +839,30 @@ function warnAboutMissingIdentifier({
 /**
  * Transform Yup ValidationError to a more usable object
  */
-export function yupToFormErrors<Values>(yupError: any): FormikErrors<Values> {
+export function yupToFormErrors<Values>(
+  yupError: any,
+  validationSchemaOptions: ValidationSchemaOptions
+): FormikErrors<Values> {
   let errors: FormikErrors<Values> = {};
   if (yupError.inner.length === 0) {
     return setIn(errors, yupError.path, yupError.message);
   }
-  for (let err of yupError.inner) {
-    if (!(errors as any)[err.path]) {
-      errors = setIn(errors, err.path, err.message);
+  // if showMultipleFieldErrors is enabled, set the error value
+  // to an array of all errors for that field
+  if (validationSchemaOptions.showMultipleFieldErrors) {
+    for (let err of yupError.inner) {
+      let fieldErrors = getIn(errors, err.path);
+      if (!fieldErrors) {
+        fieldErrors = [];
+      }
+      fieldErrors.push(err.message);
+      errors = setIn(errors, err.path, fieldErrors);
+    }
+  } else {
+    for (let err of yupError.inner) {
+      if (!(errors as any)[err.path]) {
+        errors = setIn(errors, err.path, err.message);
+      }
     }
   }
   return errors;

src/types.tsx

@@ -191,6 +191,10 @@ export interface FormikConfig<Values> extends FormikSharedConfig {
    * A Yup Schema or a function that returns a Yup schema
    */
   validationSchema?: any | (() => any);
+  /**
+   * Additional options relating to validationSchema
+   */
+  validationSchemaOptions?: ValidationSchemaOptions;
 
   /**
    * Validation function. Must return an error object or promise that
@@ -199,6 +203,10 @@ export interface FormikConfig<Values> extends FormikSharedConfig {
   validate?: (values: Values) => void | object | Promise<FormikErrors<Values>>;
 }
 
+export interface ValidationSchemaOptions {
+  showMultipleFieldErrors?: boolean;
+}
+
 /**
  * State, handlers, and helpers made available to form component or render prop
  * of <Formik/>.
@@ -252,7 +260,7 @@ export interface FieldMetaProps<Value> {
   /** Value of the field */
   value: Value;
   /** Error message of the field */
-  error?: string;
+  error?: string | string[];
   /** Has the field been visited? */
   touched: boolean;
   /** Initial value of the field */

test/Formik.test.tsx

@@ -1091,4 +1091,21 @@ describe('<Formik>', () => {
       users: [{ firstName: 'required', lastName: 'required' }],
     });
   });
+
+  it('respects the validationSchemaOptions prop', async () => {
+    const validationSchema = Yup.object().shape({
+      firstName: Yup.string().required('required'),
+    });
+
+    const { getProps } = renderFormik({
+      initialValues: { users: [{ firstName: '' }] },
+      validationSchema,
+      validationSchemaOptions: { showMultipleFieldErrors: true },
+    });
+
+    await getProps().validateForm();
+    expect(getProps().errors).toEqual({
+      firstName: ['required'],
+    });
+  });
 });

test/yupHelpers.test.ts

@@ -3,6 +3,9 @@ import { validateYupSchema, yupToFormErrors } from '../src';
 const Yup = require('yup');
 const schema = Yup.object().shape({
   name: Yup.string('Name must be a string').required('required'),
+  num: Yup.number()
+    .min(1, 'must be greater than or equal to 1')
+    .integer('must be an integer'),
 });
 
 describe('Yup helpers', () => {
@@ -11,11 +14,22 @@ describe('Yup helpers', () => {
       try {
         await schema.validate({}, { abortEarly: false });
       } catch (e) {
-        expect(yupToFormErrors(e)).toEqual({
+        expect(yupToFormErrors(e, { showMultipleFieldErrors: false })).toEqual({
           name: 'required',
         });
       }
     });
+
+    it('should return an array for each field when showMultipleFieldErrors is enabled', async () => {
+      try {
+        await schema.validate({ name: '', num: 0.1 }, { abortEarly: false });
+      } catch (e) {
+        expect(yupToFormErrors(e, { showMultipleFieldErrors: true })).toEqual({
+          name: ['required'],
+          num: ['must be greater than or equal to 1', 'must be an integer'],
+        });
+      }
+    });
   });
 
   describe('validateYupSchema()', () => {