How to handle optional fields in a zod schema?

[zayenz]

What is the best way to handle optional fields? For example, consider the following form data

const formData = zfd.formData({
    num: zfd.numeric().optional(),
    fruits: zfd.repeatableOfType(zfd.numeric()).optional(),
});

Even though both fields are marked as optional, the validation indicates that they are required. Code showing the behaviour is in this Gist.

If I add default values defaultValues={{ num: 123, fruits: [] }} for the fields, the empty array will still trigger a field error "fruits[0]": "Required" and the default for num needs to be some number and can not be left as null or undefined.

[airjp73]

The optional has to go inside numeric. So the correct way to write that schema would be this way:

const formData = zfd.formData({
  num: zfd.numeric(z.number().optional()),
  fruits: zfd.repeatableOfType(zfd.numeric(z.number().optional())),
});

This is because zod's schema.optional() is really just an alias for z.optional(schema). So when you do zfd.numeric().optional(), that is essentially the same as

z.optional(
  z.preprocess(
    preprocessNumeric,
    z.number()
  )
)
// optional -> preprocess -> number

So in the scenario where the user leaves the number input blank, zod evaluates it like this:

• Value for num is ''
• z.optional gets evaluated first and sees that the value is not undefined, so it continues on to the next validation
• z.preprocess turns '' into undefined
• z.number sees undefined and throws a validation error

When doing zfd.numeric(z.number().optional()), things get placed in the right order:

z.preprocess(
  preprocessNumeric,
  z.optional(
    z.number()
  )
)
// preprocess -> optional -> number

[zayenz]

Awesome explanation! Thanks a lot!

[zayenz]

Worth mentioning as an update, using fruits: zfd.repeatableOfType(zfd.numeric(z.number().optional())) will give a parsed result type of (number | undefined)[], while the desired type is number[] | undefined. Note, also tried with various permutations and usages of repeatable with Zod z.array but with no luck.

Solving for now using some simple code that fixes the types, but might be worth considering how to get ``number[] | undefined` as a type.

[airjp73]

Oh, I think I misunderstood what you were trying to do with that one. One of the goals of repeatable is to always return at least an empty array, so it should never give you undefined instead of an array. Can you describe your use-case a bit more so I can suggest an approach?

If this is to do with react-select, I played around with it a bit and the issue seems to be that it still has an empty input, even when there are no values selected. You could get around this by doing something like:

fruits: zfd
  .repeatableOfType(zfd.text(z.string().optional()))
  .transform((val) =>
    val.filter((item) => item !== undefined && item !== null)
  )

Sandbox link.

[zayenz]

Accepting an empty array is fine as well, but I always get the error that the array is required when no input is selected. This is why I tried to look into optional as a way to allow empty inputs.

Using transform for filtering is more elegant than the use-site call I had to a similar function.