Zod in Angular

Using Zod in an Angular project is a great way to introduce runtime validation with static typing. Zod is a TypeScript-first schema declaration and validation library, which complements Angular’s type system and form handling.

Why Use Zod in Angular?

Type-safe validation

Works well with Reactive Forms or standalone services

Generates types from schemas automatically

Useful for form validation, API response validation, and runtime checks

📦 Step 1: Install Zod

npm install zod

📄 Step 2: Define a Schema

In a shared file like user.schema.ts:

import { z } from 'zod';

export const UserSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email'),
  age: z.number().min(18, 'Must be 18 or older'),
});
export type User = z.infer<typeof UserSchema>;

🧪 Step 3: Use Zod for Form Validation (Reactive Form Example)

user-form.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { UserSchema } from './user.schema';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})…