mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-28 07:04:20 +00:00
535a7d9220
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>
)}
/>
```
shadcn/ui
Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. Use this to build your own component library.
Documentation
Visit http://ui.shadcn.com/docs to view the documentation.
Contributing
Please read the contributing guide.
License
Licensed under the MIT license.