Theo's Typesafe CultTTC
Theo's Typesafe Cult•4y ago•
5 replies
utdev

Zob nested object with react hook form?

I have a schema like this in zod:
import { z } from "zod";

const createClientSchema = z.object({
    firstname: z.string(),
    lastname: z.string(),
    bank_account: z.object({
        iban: z.string(),
        bic: z.string().optional(),
        bank_name: z.string(),
        account_owner: z.string(),
    }),
})

export { createClientSchema }


I am setting each field like this in my component
<div className="col-span-6 sm:col-span-3">
    <Label htmlFor="iban">IBAN</Label>
    <Input
    id="iban"
    type="text"
    name="iban"
    disabled={isSubmitting}
    />
    {errors.bank_account?.iban && (
    <p className="text-sm text-red-600 mt-1">
        {errors.bank_account?.iban.message}
    </p>
    )}
</div>


But I still get this validation error:
bank_account
: 
message
: 
"Required"
ref
: 
undefined
type
: 
"invalid_type"


I think I am doing something wrong with the nested object validation in my zod, any ideas?
Was this page helpful?