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 }

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>

<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"

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?

4 Replies

cornflour•3y ago

the name of the nested field in the input should be bank_account.iban instead of just iban i believe

Unknown User•3y ago

Message Not Public

utdevOP•2y ago

Did not try it yet, going to try it now @Regular_Trashman did that answer work for you?

Unknown User•2y ago

Message Not Public

Gaming

Programming

Zob nested object with react hook form?