angular-forms_skill

Overview

This skill helps Angular developers build signal-based forms using Angular v21+ Signal Forms API. It focuses on type-safe, reactive forms with automatic two-way binding, schema-driven validation, and reactive field state. Use it to create dynamic, multi-step, and conditionally-rendered forms with built-in and custom validators.

How this skill works

You define a writable signal as the form model and create a form from that model using the form() factory. The form exposes a FieldTree for every property, providing signals for value, validation, interaction, and availability (hidden/disabled/readonly). Validation rules are declared in a schema callback and support built-in, conditional, cross-field, custom, and async validators. Submission utilities mark fields touched, run validation, and let you execute async submit handlers.

When to use it

• Building new Angular v21+ forms that benefit from signal reactivity and two-way binding
• Creating forms with schema-based, type-safe validation and clear field state signals
• Implementing dynamic or array-backed forms (add/remove items, applyEach)
• Adding conditional fields (hidden/disabled/readonly) or conditional validation
• Implementing custom or async validators (e.g., username availability) or cross-field checks

Best practices

• Keep the model as the single source of truth: use a writable signal for the entire form model
• Declare validation in the schema callback to keep rules colocated with the model shape
• Prefer built-in validators for common checks and use validate/validateHttp for custom logic
• Use field state signals (touched, dirty, pending) for UX (errors, loading indicators) rather than ad-hoc flags
• Reset form interaction state with form().reset() and update the model explicitly after successful submits
• Use applyEach for arrays to define per-item validation and manage items via model updates

Example use cases

• Login form with required and email validators, disabling submit while invalid or pending
• Multi-step signup where each step maps to nested model slices and cross-field validation (password match)
• Order forms with dynamic items using applyEach and add/remove item helpers
• Profile editor with conditional fields (public URL shown only when isPublic is true)
• Username availability check using async validateHttp to call an API and display pending state