mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-26 06:05:56 +00:00
Add validation to prevent converting `undefined` error messages to string in the `FormMessage` component.
This fix addresses issues that occur in complex validation structures, such as validating entire objects.
```ts
const formSchema = z.object({
location: z.object({
city: z.string().nonempty(),
state: z.string().nonempty(),
country: z.string().nonempty(),
}).superRefine((data, ctx) => {
...
});
```
```tsx
<FormField
control={form.control}
name="location"
render={() => (
<FormItem>
<FormField
control={form.control}
name="location.city"
render={({ field }) => (
<FormItem>
<FormLabel>City</FormLabel>
<FormControl>
<Input placeholder="Enter city" {...field} />
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="location.state"
render={({ field }) => (
<FormItem>
<FormLabel>State</FormLabel>
<FormControl>
<Input placeholder="Enter state" {...field} />
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="location.country"
render={({ field }) => (
<FormItem>
<FormLabel>Country</FormLabel>
<FormControl>
<Input placeholder="Enter country" {...field} />
</FormControl>
</FormItem>
)}
/>
<FormMessage />
</FormItem>
)}
/>
```