typescript 如何更改Zod的数组自定义错误?

2w2cym1i  于 2023-10-22  发布在  TypeScript
关注(0)|答案(1)|浏览(163)

bounty还有5天到期。此问题的答案有资格获得+50声望奖励。douglasrcjames希望引起更多的注意这个问题。

我使用Zod来验证我的react-hook-form字段,我一直得到预定义的错误“Expected array,received null”,但我想要一个我定义的更前端友好的措辞。如何设置此设置的自定义消息?参见下面的promos,当提交时没有选择“复选框”数组字段时有相应的输出。

验证码:

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."),
    }),

输出:

xzv2uavs

xzv2uavs1#

我发现zod中的数组没有办法做到这一点,这很奇怪,因为这对大多数其他类型都是可能的。
围绕它有两种选择。

(1)传递默认值

确保promos始终默认为空数组。

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

(2)手动重写验证错误

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

  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
};

相关问题