LogoGitHub Repo

Example 5: Advanced Nested Signal Form

This example demonstrates a deeply nested form with multiple fields and arrays, including dynamic tags for each contact.

Address

Contacts

No contacts added yet.

{
  "name": "",
  "age": "",
  "email": "",
  "gender": "",
  "subscribe": false,
  "address": {
    "street": "",
    "city": "",
    "zip": "",
    "country": "",
    "contacts": []
  }
}

Key Features

  • ⚡ Deeply nested reactive form state powered by Angular signals
  • ✅ Schema-based validation for all fields (user, address, contacts, tags)
  • 🔄 Real-time error feedback and UI updates
  • ➕ Dynamic add/remove for contacts and tags
  • 🧩 Minimal, readable, and extensible form logic
  • 🛡️ Instant validation and error display for each field

This example demonstrates efficient nested form state management and custom validation using Angular signals, with instant error feedback and a clean, extensible approach.