Angular Signal Forms

A hands-on learning project for exploring Angular's Signal Forms API (available in Angular v21+). Each example demonstrates a different aspect of signal-based form management — from basic form creation to async and HTTP validation.

Examples

Foundations

• Basic — Create a reactive form from a plain config object. Fields become signals — no FormBuilder.
• Field State Rules — disabled, readonly, and hidden rules with conditional logic. Navigate nested group fields.
• Input Types — Bind every HTML control type: text, number, email, password, date, checkbox, radio, select, textarea, and multiple select.

Validation

• Built-In Validations — required, email, min, max, minLength, maxLength, and pattern with custom error messages.
• Custom Validations — Write your own validators with validate() and validateTree(). Reusable rules, cross-field checks, and custom error messages.
• Async Validations — Server-side validation with validateAsync and resource. Debounced requests, pending states, and error handling.
• HTTP Validations — Server-side validation with validateHttp. GET and POST requests, debounced HTTP calls, and error handling.

Development server

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/.

Building

ng build

Build artifacts are stored in the dist/ directory.

Running unit tests

ng test