Dynamically Modifying Validation Schemas in Zod: A TypeScript and React-Hook-Form Example
Tags: typescript, react, zod
Published: 2023-08-04 17:19:11

---
title: "Dynamically Modifying Validation Schemas in Zod: A TypeScript and React-Hook-Form Example"
published: true
description: "Learn how to dynamically modify validation schemas in Zod based on certain conditions, using TypeScript and React-Hook-Form. This technique is particularly useful when the same form is used in different scenes and certain fields are required or optional based on these conditions."
tags: TypeScript, React, Zod
---

## Table of Contents
1. [Introduction](#introduction)
2. [What is Zod?](#what-is-zod)
3. [Creating Dynamic Schemas: User Registration and User Information Editing](#creating-dynamic-schema)
4. [Conclusion](#conclusion)

## Introduction <a name="introduction"></a>

When handling form validation in React applications, it's common to use Zod in conjunction with React Hook Form. However, what should you do when the same form is used in different scenes and certain fields are required or optional based on these conditions? In this article, we will introduce how to create dynamic validation schemas in Zod.

## What is Zod? <a name="what-is-zod"></a>

Zod is a runtime validation library for TypeScript. Zod provides powerful schema definition capabilities for validating all types of data. Additionally, these schemas can be used as TypeScript types, allowing you to write type-safe code.

## Creating Dynamic Schemas: User Registration and User Information Editing <a name="creating-dynamic-schema"></a>

Let's consider a specific situation. We have a user registration screen and a user information editing screen, each with a form. These two screens use almost the same form, but there is one difference. On the user registration screen, the "Agree to Terms and Conditions" checkbox is required, but on the user information editing screen, this field does not exist.

In such cases, we create a function to dynamically generate a schema based on the `isEdit` parameter. Here is the relevant code:

```typescript
import * as z from 'zod';

export const createProfileSchema = (isEdit: boolean) => {
    let isAgreeTermsSchema = isEdit ? z.boolean().optional() : z.boolean();

    return z
        .object({
            // Other fields go here...
            isAgreeTerms: isAgreeTermsSchema,
        });
};
```

We generate the schema using this function:

```typescript
const {
    params: { isEdit }
} = useRoute<ProfileEntryRouteProp>();

const profileSchema = createProfileSchema(isEdit);
```

This way, when `isEdit` is `false` (on the user registration screen), `isAgreeTerms` is a required field, and when `isEdit` is `true` (on the user information editing screen), `isAgreeTerms` does not exist (is optional).

## Conclusion <a name="conclusion"></a>

In this article, we introduced how to create dynamic validation schemas in Zod. By using this method, you can dynamically change whether a field is required or optional based on specific conditions. This makes the combination of Zod and React Hook Form an even more powerful tool.

---

That's all for this article. I hope it was helpful to you. If you have any questions, please let me know in the comments. Also, don't forget to like this article if you found it useful!