zod schema with nested objects

Question

I have a form with this structure.

If I group the addressfields inside an own object in the data and schema object it doesn't works.

// works
const formData = ref({
  email: "",
  firstName: "",
  lastName: "",
  street: "",
  addressDetails: "",
    ...
});

const schema = z.object({
  email: z
    .string()
    .min(1, { message: "E-Mail is required" })
    .email("Invalid email"),
  firstName: z.string().min(1, { message: "First Name is required" }),
  lastName: z.string().min(1, { message: "Last Name is required" }),
    ...
});

// doesn't works
 const formData = ref({
  email: "",
  address: {
    firstName: "",
    lastName: "",
    ...
  }
});
const schema = z.object({
  email: z
    .string()
    .min(1, { message: "E-Mail is required" })
    .email("Invalid email"),
  address: z.object({
    firstName: z.string().min(1, { message: "First Name is required" }),
    lastName: z.string().min(1, { message: "Last Name is required" }),
    ...

  }),
});

  <UForm
    :state="formData"
    :schema="schema"
    @submit="onSubmit"
  >
    <checkoutAccount v-model="formData.email" />
    <formsAddress
      v-model:firstName="formData.address.firstName"
      v-model:lastName="formData.address.lastName"
      v-model:street="formData.address.street"
      v-model:addressDetails="formData.address.addressDetails"
      v-model:city="formData.address.city"
      v-model:postalcode="formData.address.postalcode"
      v-model:country="formData.address.country"
    />

Any ideas what I'm doing wrong?

added demo here https://stackblitz.com/edit/nuxt-ui-5rrpvr?file=app.vue,components%2FaddressForm.vue

thanks, gregor

Gregor · Accepted Answer · 2024-10-18 10:36:28Z

0

ok the problem was not zod related, I was missing the full path in the name attribute.

//form.vue
const formData = ref({
  email: "",
  address: {
    firstName: "",
    lastName: "",
    ...
  }
});

const props = defineProps({
  name: { type: String },
});

<formsAddress
  name="address"
  v-model:firstName="formData.address.firstName"
  ...

//formsAddress.vue
<UFormGroup
  label="First Name"
  required
  :name="`${props.name}.firstName`" <<--full path
>
  <UInput size="xl" v-model="firstName" autocomplete="given-name" />
</UFormGroup>
...

answered Oct 18, 2024 at 10:36

Gregor

2,2838 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

zod schema with nested objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related