Change `formErrors` to produce normalized, deep object instead of `flatten()`

I use error.formErrors in every project, and it’s used the default Blitz.js form abstraction for displaying form errors on the client.

The problem is that this flattens the errors to a single level, loosing critical path information for nested object errors.

You can see an example here:

const test = zod
  .object({
    name: zod
      .object({
        firstName: zod.string().nonempty({ message: "First name can not be empty." }),
        middleName: zod.string(),
        lastName: zod.string(),
      })
  })
  .safeParse({
    name: {
      firstName: "",
      middleName: "estrada",
      lastName: "",
    },a
  }).error.fieldErrors;

  {
    name: ["First Name can not be empty.", "Required", "Required"]
  }

Instead of the above, which is unusable, the result should be:

  {
    name: {
      firstName: ["First Name can not be empty."], 
      middleName: ["Required"],
      lastName: ["Required"]
  }

Workaround for 2 levels

  } catch (error) {
    const fieldErrors: any = {}
    for (const issue of error.issues) {
      if (issue.path.length > 0) {
        if (issue.path.length === 1) {
          fieldErrors[issue.path[0]] ??= []
          fieldErrors[issue.path[0]].push(issue.message)
        } else {
          fieldErrors[issue.path[0]] ??= {}
          fieldErrors[issue.path[0]][issue.path[1]] ??= []
          fieldErrors[issue.path[0]][issue.path[1]].push(issue.message)
        }
      } else {
        // form error
      }
    }
    return fieldErrors
  }

[lukeramsden]

This is currently the function I’m using to validate a large, nested form, with arrays of items, using Formik to handle form state:

import * as z from 'zod';
import {get, set} from 'lodash';
import {FormikErrors} from 'formik';

const formikValidateWithZod = <T extends z.Schema<any>>(
  validationSchema: T,
) => <F = z.infer<T>>(values: F): FormikErrors<F> => {
  const result = validationSchema.safeParse(values);

  if (result.success) {
    return {};
  } else {
    const fieldErrors: FormikErrors<F> = {};
    const processError = (e: z.ZodError) => {
      for (const error of e.errors) {
        if (error.code === 'invalid_union') {
          error.unionErrors.map(processError);
        } else {
          const path = error.path.map((x) => x.toString());
          const currentErrorAtPath = get(fieldErrors, path);
          set(
            fieldErrors,
            path,
            currentErrorAtPath // if error already exists, append as new line
              ? `${error.message}\n${currentErrorAtPath}`
              : error.message,
          );
        }
      }
    };
    processError(result.error);
    return fieldErrors;
  }
};

export default formikValidateWithZod;

[glennreyes]

Here’s the workaround I am using to create the deep errors object for formik:

validationSchema.current?.safeParse(values)?.error?.errors?.reduce(
  (errors, error) =>
    error.path.reduce((a, b, level) => {
      if (level === error.path.length - 1) {
        a[b] = error.message;

        return errors;
      }

      if (!a[b]) {
        a[b] = {};
      }

      return a[b];
    }, errors),
  {} as { [key: string]: any },
);