Getting Started

This guide shows how to install @devzwo/ngx-signal-schema and create your first schema.

Prerequisites

ngx-signal-schema is built for Angular v21 and Angular Signal Forms.

Installation

npm install @devzwo/ngx-signal-schema

pnpm add @devzwo/ngx-signal-schema

Your first schema

import { schema } from '@angular/forms/signals';
import { requiredTrimmed } from '@devzwo/ngx-signal-schema';

interface ContactForm {
  name: string;
  email: string;
}

export const ContactSchema = schema<ContactForm>((path) => {
  requiredTrimmed(path.name);
});

Use the schema

import { signal } from '@angular/core';
import { form } from '@angular/forms/signals';

const initialValue: ContactForm = {
  name: '',
  email: '',
};

protected readonly contactData = signal(initialValue);

protected readonly contactForm = form(
  this.contactData,
  ContactSchema
);

Compose schemas

import { schema } from '@angular/forms/signals';
import { append, requiredTrimmed } from '@devzwo/ngx-signal-schema';

const BaseSchema = schema<ContactForm>((path) => {
  requiredTrimmed(path.name);
});

export const ExtendedSchema = append(
  BaseSchema,
  (path) => {
    requiredTrimmed(path.email);
  }
);

Conditional fields

import {
  disabledHidden,
  requiredTrimmed,
  valueEquals,
} from '@devzwo/ngx-signal-schema';

interface ContactForm {
  personType: 'private' | 'company';
  name: string;
  companyName: string;
}

export const ContactSchema = schema<ContactForm>((path) => {
  requiredTrimmed(path.name);

  disabledHidden(
    path.companyName,
    valueEquals(path.personType, 'private')
  );
});

Next steps

Continue with:

• Schema Composition
• Conditional Schemas
• Recipes
• API Reference