Zod unique array/array of object validation with superRefine + shadcn

[dev-SR]

When validating arrays or arrays of objects in a dynamic form using Zod's refine, showing error messages with shacdn's <FormMessage /> component was challenging. Despite attempts with refine, the ideal validation and error message display required a different approach.
The usage of superRefine in Zod provided the necessary functionality to validate unique arrays or arrays of objects effectively. Coupled with shacdn's <FormMessage /> component, the error messages were successfully displayed within dynamic form fields.

Code Example:

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { Control, useFieldArray, useForm } from 'react-hook-form';
import * as z from 'zod';

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';

const productFormSchema = z.object({
	name: z
		.string()
		.min(2, {
			message: 'Username must be at least 2 characters.'
		})
		.max(300, {
			message: 'Username must not be longer than 300 characters.'
		}),

	VariantsRegistryOption: z
		.array(
			z.object({
				option_name: z.string(),
				option_values: z
					.array(
						z.object({
							option_value: z.string().min(2)
						})
					)
					.nonempty()
					.superRefine((items, ctx) => {
						const uniqueItemsCount = new Set(items.map((value) => value.option_value)).size;
						const errorPosition = items.length - 1;
						if (uniqueItemsCount !== items.length) {
							ctx.addIssue({
								code: z.ZodIssueCode.custom,
								message: 'Duplicate values are not allowed.',
								path: [errorPosition, 'option_value']
							});
						}
					})
			})
		)
		.superRefine((items, ctx) => {
			const uniqueItemsCount = new Set(items.map((value) => value.option_name)).size;
			const errorPosition = items.length - 1;
			if (uniqueItemsCount !== items.length) {
				ctx.addIssue({
					code: z.ZodIssueCode.custom,
					message: 'Duplicate options are not allowed.',
					path: [errorPosition, 'option_name']
				});
			}
		})
});

type ProductFormValues = z.infer<typeof productFormSchema>;

// This can come from your database or API.
const defaultValues: Partial<ProductFormValues> = {
	VariantsRegistryOption: [
		{
			option_name: 'Color',
			option_values: [
				{
					option_value: 'Red'
				}
			]
		}
	]
};

const AddProduct = () => {
	const form = useForm<ProductFormValues>({
		resolver: zodResolver(productFormSchema),
		defaultValues,
		mode: 'onChange'
	});

	const dynamicOptionFormPart = useFieldArray({
		name: 'VariantsRegistryOption',
		control: form.control
	});

	function onSubmit(data: ProductFormValues) {
		alert(JSON.stringify(data, null, 2));
	}

	console.log(form.formState.errors);

	return (
		<div className='flex flex-col w-full h-full items-center'>
			<Form {...form}>
				<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8 w-1/2'>
					<FormField
						control={form.control}
						name='name'
						render={({ field }) => (
							<FormItem>
								<FormLabel>Product Name</FormLabel>
								<FormControl>
									<Input placeholder='shadcn' {...field} />
								</FormControl>
								<FormDescription>
									Give your product a name that will stand out from the crowd.
								</FormDescription>
								<FormMessage />
							</FormItem>
						)}
					/>

					<div>
						{dynamicOptionFormPart.fields.map((field, index) => (
							<FormField
								control={form.control}
								key={field.id}
								name={`VariantsRegistryOption.${index}.option_name`}
								render={({ field }) => (
									<FormItem>
										<FormLabel className={cn(index !== 0 && 'sr-only')}>Variant Options</FormLabel>
										<FormDescription className={cn(index !== 0 && 'sr-only')}>
											Add variant option name
										</FormDescription>
										<div className='flex space-x-2'>
											<FormControl>
												<Input {...field} />
											</FormControl>
											<Button
												variant={'outline'}
												size={'sm'}
												className='text-red-500 hover:text-red-600'
												onClick={() => {
													dynamicOptionFormPart.remove(index);
												}}>
												X
											</Button>
										</div>
										<FormMessage />
										<div className='flex ml-16'>
											<NestedOptionValueForm control={form.control} nestIndex={index} />
										</div>
									</FormItem>
								)}
							/>
						))}
						<Button
							type='button'
							variant='ghost'
							size='sm'
							className='mt-2 text-blue-500 hover:text-blue-600'
							onClick={() =>
								dynamicOptionFormPart.append({
									option_name: '',
									option_values: [
										{
											option_value: ''
										}
									]
								})
							}>
							+ Add another variant option
						</Button>
					</div>
					<Button type='submit'>Add Product</Button>
				</form>
			</Form>
		</div>
	);
};

type NestedOptionValueFormProps = {
	nestIndex: number;
	control: Control<ProductFormValues>;
};

const NestedOptionValueForm = ({ nestIndex, control }: NestedOptionValueFormProps) => {
	const dynamicOptionValueFormPart = useFieldArray({
		control,
		name: `VariantsRegistryOption.${nestIndex}.option_values`
	});

	return (
		<Card className='p-2 w-full'>
			{dynamicOptionValueFormPart.fields.map((field, index) => (
				<FormField
					control={control}
					key={field.id}
					name={`VariantsRegistryOption.${nestIndex}.option_values.${index}.option_value`}
					render={({ field }) => (
						<FormItem>
							<FormDescription className={cn(index !== 0 && 'sr-only')}>
								Add variant option values
							</FormDescription>
							<div className='flex space-x-2'>
								<FormControl>
									<Input {...field} />
								</FormControl>
								<Button
									variant={'outline'}
									size={'sm'}
									className='text-red-500 hover:text-red-600'
									onClick={() => {
										dynamicOptionValueFormPart.remove(index);
									}}>
									X
								</Button>
							</div>
							<FormMessage />
						</FormItem>
					)}
				/>
			))}
			{dynamicOptionValueFormPart.fields.length == 0 && (
				<Button
					type='button'
					variant='ghost'
					size='sm'
					className=' text-blue-500 hover:text-blue-600'
					onClick={() => dynamicOptionValueFormPart.append({ option_value: '' })}>
					+ Add values
				</Button>
			)}
			{dynamicOptionValueFormPart.fields.length > 0 && (
				<Button
					type='button'
					variant='ghost'
					size='sm'
					className='mt-2 text-blue-500 hover:text-blue-600'
					onClick={() => dynamicOptionValueFormPart.append({ option_value: '' })}>
					+ Add more values
				</Button>
			)}
		</Card>
	);
};
export default AddProduct;

This will show the refine error at the last dynamic array item.

Fill free to suggest better approach.

[chanthinh]

Hi @dev-SR, It would be better if you had codesandbox

[deleteLater]

Thanks for sharing this, it helps me a lot ❤️ @dev-SR