What is the best way to modify the custom error array for Zod?

Question

What is the best way to modify the custom error array for Zod?

When using Zod for validating react-hook-form fields, I constantly encounter the default error message "Expected array, received null". Is there a way to customize this error message in a more user-friendly manner? Below is an example of how to set a custom message for this specific scenario within the promos field, along with the corresponding output when submitting the form without making any selections in the "checkbox" array field.

Code:

    promotion: z.object({
        id: z.string().optional(),
        name: z.string({
                required_error: "A name is required.",
                invalid_type_error: "A name is required.",
            }).min(1, "A name is required.").max(150, "The name must be less than 150 characters."),
        email: z.string({
                required_error: "An email is required.",
                invalid_type_error: "This is an invalid email.",
            }).email().min(1, "An email is required."),
        promos: z.array(z.string({
                required_error: "A promotion selection is required.",
                invalid_type_error: "This is an invalid promotion selection",
            }).min(1, "A promotion selection is required.")).min(1, "At least one promotion selection is required."),
    }),

Output:

https://i.sstatic.net/yIb9T.png

typescript zod

Answer 1

Answer №1

To efficiently manage specific types of issues, you can establish a custom ZodErrorMap globally. The global scope ensures widespread applicability.

import { z } from "zod";

const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
  if (issue.code === z.ZodIssueCode.invalid_type) {
    if (issue.expected === "string") {
      return { message: "bad type!" };
    }
  }
  if (issue.code === z.ZodIssueCode.custom) {
    return { message: `less-than-${(issue.params || {}).minimum}` };
  }
  return { message: ctx.defaultError };
};

z.setErrorMap(customErrorMap);

https://github.com/colinhacks/zod/blob/master/ERROR_HANDLING.md#customizing-errors-with-zoderrormap

If you prefer more specific functionality, consider applying the customized ZodErrorMap to the definition of your schema or within the schema parsing callback. However, not all schemas might support the customized ZodErrorMap parameter for application.

UPDATED 2023-01-25

For a tailored approach, try the following example:

z.setErrorMap((issue, ctx) => {
  if (issue.code === "invalid_type" && issue.expected === "array")
    return { message: "Your array is not well defined" };
  return { message: ctx.defaultError };
});

Answer 2

To efficiently manage specific types of issues, you can establish a custom ZodErrorMap globally. The global scope ensures widespread applicability.

import { z } from "zod";

const customErrorMap: z.ZodErrorMap = (issue, ctx) => {
  if (issue.code === z.ZodIssueCode.invalid_type) {
    if (issue.expected === "string") {
      return { message: "bad type!" };
    }
  }
  if (issue.code === z.ZodIssueCode.custom) {
    return { message: `less-than-${(issue.params || {}).minimum}` };
  }
  return { message: ctx.defaultError };
};

z.setErrorMap(customErrorMap);

https://github.com/colinhacks/zod/blob/master/ERROR_HANDLING.md#customizing-errors-with-zoderrormap

If you prefer more specific functionality, consider applying the customized ZodErrorMap to the definition of your schema or within the schema parsing callback. However, not all schemas might support the customized ZodErrorMap parameter for application.

UPDATED 2023-01-25

For a tailored approach, try the following example:

z.setErrorMap((issue, ctx) => {
  if (issue.code === "invalid_type" && issue.expected === "array")
    return { message: "Your array is not well defined" };
  return { message: ctx.defaultError };
});

Answer 3

Answer №2

I couldn't find a way to handle arrays in zod, even though it's possible for other data types.

There are two workarounds available:

(1) Set a Default Value

Make sure that promos always defaults to an empty array.

.parse({...promotion, promos: promotion.promos ?? [] });

(2) Customize Validation Errors Manually

export const validateInput = <T>(
  input: Partial<T>,
  schema: z.Schema,
): Result<T, CustomError> => {
  const result = schema.safeParse(input); // instead of throwing errors

  if (result.success) {
    return { data: result.data };
  }

  return {
    ...result,
    error: {
      issues: result.error.issues.map((error) => ({
        ...error,
        message: error.code === 'invalid_type' && error.expected === 'array' && error.received === 'null' ? "your message here" error.message
      }))
    }
  }; // or throw this result
};

EDIT: Instead of calling schema.parse(input) (which throws errors) or schema.safeParse(input) (which returns errors), call the custom function provided above and handle the errors as needed.

Answer 4

I couldn't find a way to handle arrays in zod, even though it's possible for other data types.

There are two workarounds available:

(1) Set a Default Value

Make sure that promos always defaults to an empty array.

.parse({...promotion, promos: promotion.promos ?? [] });

(2) Customize Validation Errors Manually

export const validateInput = <T>(
  input: Partial<T>,
  schema: z.Schema,
): Result<T, CustomError> => {
  const result = schema.safeParse(input); // instead of throwing errors

  if (result.success) {
    return { data: result.data };
  }

  return {
    ...result,
    error: {
      issues: result.error.issues.map((error) => ({
        ...error,
        message: error.code === 'invalid_type' && error.expected === 'array' && error.received === 'null' ? "your message here" error.message
      }))
    }
  }; // or throw this result
};

EDIT: Instead of calling schema.parse(input) (which throws errors) or schema.safeParse(input) (which returns errors), call the custom function provided above and handle the errors as needed.

What is the best way to modify the custom error array for Zod?

Answer №1

UPDATED 2023-01-25

Answer №2

(1) Set a Default Value

(2) Customize Validation Errors Manually

Similar questions

Invoke method from service on click in Angular 2

Executing Multiple Angular2 Animations Concurrently: A Guide

Sometimes *ngIf doesn't function as expected

Is there a way for me to transfer a variable to a URL?

Angular build process encountering environment issue

Exploring the ideal workspace for maximizing the potential of Ionic framework development

Learn how to securely download files from an Azure Storage Container using Reactjs

The reason why Type zzz cannot be assigned to type (zzz & NgIterable<xxx>) | undefined | null

Exploring nested arrays within a JSON response using Typescript in the ReactJS environment

Ensuring accurate date formatting of API responses in TypeScript

How to Dynamically Determine if a Value Matches a Union Type in Typescript

The 'innerText' property is not present in the 'Element' type. (2339)

What is the reason behind TypeScript permitting the assignment of a class instance to a variable that is of a different type?

How come I am not finding any results when trying to search for a specific subdocument within a document? (mongodb and mongoose)

Guide on inserting a String variable into a String within the cy.get() method

Navigating through React Native with TypeScript can be made easier by using the proper method to pass parameters to the NavigationDialog function

I am looking for the most optimal method to export a TypeScript class from my package in a way that allows it to be extended by other packages

What could be causing my matDialog to display incorrectly in Angular version 15?

The data structure '{ one: string; two: string; three: string; }' cannot be directly assigned to a 'ReactNode'

How to Create a Flexible Angular Array Input Component