Form field default value

[ksamirdev]

I tried adding default value to a form. It also has zod as validation. When I submit the form, it says this field is required even when I have default value set to something.

const schema = z.object({
  email: z.string().email(),
});

 const form = useForm<z.infer<typeof schema>>({
   resolver: zodResolver(schema),
   defaultValues: {
     email,
   },
 });

<FormField
  control={form.control}
  name="email"
  defaultValue={email}
  disabled={true}
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <FormControl>
        <Input
          placeholder="Enter your email"
          className="bg-[#f1f1f1] h-14 rounded-xl text-base"
          {...field}
        />
      </FormControl>
      <FormDescription>You will receive product on this email.</FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>

[julienmiclo]

Hello,
have you wrap your with <Form {...form}> ?
And maybe remove your defaultValue={email} on your FormField ?
Regards.

[AlexTechNoir]

With react-hook-form, the only way that worked for me is to set the value programmatically, during render or in useEffect:

form.setValue('email', email)

[swayamterode]

Thanks this worked for me !

[coderlzw-cn]

const email = "[email protected]";
const schema = z.object({
  email: z.string().email().default(email)   // 👍
});


 const form = useForm<z.infer<typeof schema>>({
   resolver: zodResolver(schema),
   defaultValues: {
     email,
   },
 });

[swayamterode]

Here is the snippet:

 const formSchema = z.object({
   addressLine1: z.string(),
   addressLine2: z.string(),
   city: z.string(),
   state: z.string(),
   country: z.string(),
   pincode: z.string().min(6).max(6),
   gstNumber: z.string(),
 });

 const form = useForm<z.infer<typeof formSchema>>({
   resolver: zodResolver(formSchema),
   defaultValues: {
     addressLine1: "",
     addressLine2: "",
     city: "",
     state: "",
     country: "",
     pincode: "",
     gstNumber: "",
   },
 });
 
useEffect(() => {
   if (billingData) {
     form.setValue("addressLine1", billingData.billing_add_1 || "");
     form.setValue("addressLine2", billingData.billing_add_2 || "");
     form.setValue("city", billingData.city || "");
     form.setValue("state", billingData.state || "");
     form.setValue("country", billingData.country || "");
     form.setValue("pincode", billingData?.pin?.toString() || "");
     form.setValue("gstNumber", billingData.gst_number || "");
   }
 }, [billingData, form]);

NOTE: I am passing billingData as prop!