Skip to main content

Schema Collisions

Dealing with collisions

Some times you may want to use multiple types for the same zod schema type. You can deal with collisions using createUniqueFieldSchema:

const PhoneNumberSchema = createUniqueFieldSchema(
z.string().regex(/[0-9]{10}/, "Please enter a valid phone number"),
"phone" // You need to pass a string ID, it can be anything but has to be set explicitly and be unique.

const mapping = [
[z.string(), TextField] as const,
[MyUniqueFieldSchema, PhoneNumberField] as const,
] as const;

const MyFormSchema = z.object({
mapsToNormal: z.string(), // renders as a NormalTextField component
mapsToUnique: PhoneNumberSchema, // renders as a UltraTextField component.

This can allow you to use similar zod schemas for rendering different types of components.

Handling Optionals

@ts-react/form will match optionals to their non optional zod schemas:

const mapping = [[z.string(), TextField]] as const;

const FormSchema = z.object({
optionalEmail: z.string().email().optional(), // renders to TextField
nullishZipCode: z.string().min(5, "5 chars please").nullish(), // renders to TextField

Your zod-component-mapping should not include any optionals. If you want a reusable optional schema, you can do something like this:

const mapping = [[z.string(), TextField]] as const;

export const OptionalTextField = z.string().optional();