nested schema doesn't validate

[gregorvoinov]

Hi all :)

I have a form with this structure

 const formData = ref({
  email: "",
  address: {
    firstName: "",
    lastName: "",
    street: "",
    addressDetails: "",
    city: "",
    country: "",
    postalcode: "",
  }
});
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" }),
    street: z.string().min(1, { message: "Street is required" })
    ...
  })
});

<UForm
  :state="formData"
  :schema="schema"
  class="space-y-8 w-full flex flex-col"
  @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"
  />

if I don`t group the address inside an own object it works. The e-mail is validated correctly

What do I have to do to get it up and running?

[gregorvoinov]

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