Parse defaultValues with Zod validation

[Moshyfawn]

I'm trying to validate defaultValues with Zod and set empty (null / undefined) values to their respectful defaults via .default() method as described in the .default section of the Zod docs.

Expected Behaviour:
If invalid value passed as a defaultValues field, the default value is set as per .default() method.
Actual Behaviour:
If invalid value passed as a defaultValues field, the validation error is thrown.

Here's a simple codesandbox: https://codesandbox.io/s/zod-default-values-validation-gkdp9

Does anybody know how to properly do the single source of truth setup with the .default() method?

[knoefel]

I'm trying to validate defaultValues with Zod and set empty (null / undefined) values to their respectful defaults via .default() method as described in the .default section of the Zod docs.

Expected Behaviour:

If invalid value passed as a defaultValues field, the default value is set as per .default() method.

Actual Behaviour:

If invalid value passed as a defaultValues field, the validation error is thrown.

Here's a simple codesandbox: https://codesandbox.io/s/zod-default-values-validation-gkdp9

Does anybody know how to properly do the single source of truth setup with the .default() method?

I'm in the same situation right now, trying to set a null value for a field. Did you solve this? Thx in advance!

[schmoli]

Did you all overcome this issue, just ran into it and am researching...

[carlbarrdahl]

You can pass the defaultValues through ZodSchema.parse first.

const schema = z.object({ title: z.string().default("Default Title") });

const form = useForm({
  resolver: zodResolver(schema),
  defaultValues: schema.parse({
    // Your values here
  }),
});

[amraaone]

const profileFormSchema = z.object({
  username: z
    .string()
    .min(2, {
      message: "Username must be at least 2 characters.",
    })
    .max(30, {
      message: "Username must not be longer than 30 characters.",
    }),
  email: z
    .string({
      required_error: "Please select an email to display.",
    })
    .email(),
  bio: z.string().max(160).min(4),
  urls: z
    .array(
      z.object({
        value: z.string().url({ message: "Please enter a valid URL." }),
      })
    )
    .optional(),
})


type ProfileFormValues = z.infer<typeof profileFormSchema>

export function ProfileForm() {
  const { data: session, status } = useSession()

  const form = useForm<ProfileFormValues>({
    resolver: zodResolver(profileFormSchema),
    defaultValues: {
      username: session?.user?.name || "",
    },
    mode: "onChange",
  })

[senzujuju]

but what if my default value should be empty string, but schema require at lest min(1) ?

[ElGranTorino]

You can use union type z.union([z.string().min(1), z.literal("")]).default("")

[HALfr0ZEN]

I'm little late to this thread but I'm trying to use parseAsync with default values and everytime I do this I get changing uncontrolled input error. Using the latest zod and latest react-hook-form. This is the closest thread I found about similar problem. If anybody can help..help please :D

[BrendanC23]

Do you have a CodeSandbox that demonstrates the issue? If you are using undefined as your default values for RHF, you may want to switch to "" instead, which allows the inputs to be controlled at all times.