UForm doesn't show errors with extended/nested zod schemas

[gregorvoinov]

Environment

• Operating System: Darwin
• Node Version: v22.5.1
• Nuxt Version: 3.13.2
• CLI Version: 3.13.2
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, app, colorMode, routeRules, runtimeConfig, modules, experimental
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @pinia/[email protected]
• Build Modules: -

Version

"@nuxt/ui": "^2.18.6",

Reproduction

https://stackblitz.com/edit/nuxt-ui-ajdxeh?file=app.vue,components%2FaddressForm.vue

Description

hi,

when I use the :schema prop to validate the form, the address schema doesn't trigger errors in the form... only the email schema does

if I parse the schema against the formData manual then I can see in the console that it works... get errors and a result if there are no errors...

not sure if I do something wrong or if i't's a bug...

import { z } from 'zod';
const formData = ref({
  email: '',
  deliveryAddress: {
    firstName: '',
    lastName: '',
    street: '',
    addressDetails: '',
    city: '',
    country: '',
    postalcode: '',
  },
});

const emailSchema = z.object({
  email: z
    .string()
    .min(1, { message: 'E-Mail is required' })
    .email('Invalid email'),
});

const addressSchema = 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' }),
  city: z.string().min(1, { message: 'City is required' }),
  country: z.string().min(1, { message: 'Country is required' }),
  postalcode: z.string().min(1, { message: 'Postalcode is required' }),
});

const sameAddressSchema = emailSchema.extend({
  deliveryAddress: addressSchema,
});

const differentAddressSchema = sameAddressSchema.extend({
  billingAdress: addressSchema,
});

const onSubmit = () => {
  try {
    const result = sameAddressSchema.parse(formData.value);
    console.log(result);
  } catch (error) {
    console.log(error);
  }
};
</script>
<template>
  <UContainer class="min-h-screen flex items-center">
    <UForm class="space-y-8 w-full flex flex-col" @submit.prevent="onSubmit"> // validates -> check console
    <!-- <UForm class="space-y-8 w-full flex flex-col" :schema="sameAddressSchema" :state="formData" @submit. prevent="onSubmit" ref="form">-->  // only validates email, but not the address schema
      <UFormGroup label="E-Mail" required name="email">
        <UInput v-model="formData.email" />
      </UFormGroup>
      <addressForm
        v-model:firstName="formData.deliveryAddress.firstName"
        v-model:lastName="formData.deliveryAddress.lastName"
        v-model:street="formData.deliveryAddress.street"
        v-model:addressDetails="formData.deliveryAddress.addressDetails"
        v-model:city="formData.deliveryAddress.city"
        v-model:postalcode="formData.deliveryAddress.postalcode"
        v-model:country="formData.deliveryAddress.country"
      />

thanks,
gregor

Additional context

No response

Logs

No response

[rdjanuar]

it's not a bug. if u have nested object inside schema u should using dot notation like accesing object. for example in bellow

 <UFormGroup label="Address" required name="deliveryAddress.firstName">
        <UInput v-model="formData.deliveryAddress.firstName" />
</UFormGroup>