Zod and optional number inputs

[mtnowl]

I'm trying to figure out how to get optional number inputs to work with Zod and react-hook-form. On the resolvers README, we have this:

const schema = z.object({
  name: z.string().nonempty({ message: 'Required' }),
  age: z.number().min(10),
});


  <input type="number" {...register('age', { valueAsNumber: true })} />

When validating if the input is empty, I get the "Expected number, received nan" error. This occurs regardless of if I modify the schema to have .optional() or not.

I even tried adding in NaN as a literal through a union z.union([z.literal(NaN), z.number()]), but then it gives me "Expected NaN, received NaN"

What is the intended way to handle optional numeric inputs? How do I interact with that error?

CodeSandbox: https://codesandbox.io/s/react-hook-form-number-input-error-c0cbs?file=/src/App.tsx

[bluebill1049]

share a codesandbox.

[mtnowl]

CodeSandbox added, link is https://codesandbox.io/s/react-hook-form-number-input-error-c0cbs?file=/src/App.tsx

[Sti2nd]

The reason you get NaN @henryjin3 is because valueAsNumber returns NaN if something goes wrong (from the register documentation). And something goes wrong because the input field is returning a string, something I learned in #7128.

There is an option on register called setValueAs which let us define our own transform function that will be called before validation.

z.object({
  age: z.number().optional(),
});

<input
  type="number"
  {...register("age", {
    setValueAs: (v) => v === "" ? undefined : parseInt(v, 10),
  })}
/>;

[bryanprimus]

is this still the optimal solution? since we need to add a lot of code only for that functionality

[itujono]

Might be late to the party. But this'll do the trick without touching your base input component at all:

z.object({
   age: z.union([z.number().int().positive().min(1), z.nan()]).optional(),
})

[Claudius10]

Hi. I used coerce together with optional() and it works
z.object({
aNumber: z.coerce.number().optional(),
});

https://zod.dev/?id=coercion-for-primitives

[kellyrmilligan]

.object({
    name: z.string().trim().min(1, { message: "Name is required" }),
    nickname: z.string(),
    preferredSalutation: z.string(),
    budget: z.coerce.number(),
  })

export type Schema = z.infer<typeof schema>


const defaultValues: Schema = {
    name: "",
    nickname: "",
    preferredSalutation: "",
    budget: "", // ts error, wants a number
  }

[hatchli]

Did you get an answer for this? I'm in the same position

[its-monotype]

add .or(z.literal('')))

[henokyehulu]

What if I want it be required? Because your option make it that you can just send an empty string rather than a number. Please help!

[enfroz]

@henokyehulu Try this:

colinhacks/zod#2461 (comment)

[BaziotaBeans]

This work for me:

suits: z.preprocess((value) => {
      if (value === "") return undefined;
      return Number(value);
    }, z.union([z.number().int().positive().min(1), z.nan()]).optional()),