forms_skill

Overview

This skill helps you choose and implement Angular form patterns: Signal Forms (experimental) and Reactive Forms, plus guidance for nested structures and FormArray. It summarizes when to use each approach, key APIs, and practical tips for validation, type safety, and state handling. Use it when building or refactoring forms in Angular applications.

How this skill works

The skill inspects form requirements (signals compatibility, production readiness, complexity) and recommends Signal Forms for new signal-based apps or Reactive Forms for production stability. It explains core APIs: signal form() with FormField bindings and automatic two-way updates, and FormBuilder nonNullable.group() with formControlName, validators, and synchronous state for testing. It also covers nested FormGroup and FormArray patterns and how to read typed values.

When to use it

• Start new projects that use Angular signals: Signal Forms (experimental) for concise, type-safe bindings.
• Use Reactive Forms for production apps that need maturity, testability, and synchronous behaviour.
• Choose template-driven forms only for very simple, small forms with minimal logic.
• Use Signal Forms when you want automatic two-way binding and signal-based reactivity.
• Use Reactive Forms when you require guaranteed stability, complex validation, or wide library support.

Best practices

• For Reactive Forms always use fb.nonNullable.group() to preserve non-null types and avoid type casts.
• Use getRawValue() on Reactive Forms to retrieve a typed snapshot of form values safely.
• Keep validation declarative: use Validators with Reactive Forms or schema validators with Signal Forms for consistent error handling.
• Encapsulate nested groups and arrays in small helper methods or components to keep components readable.
• Prefer synchronous operations in Reactive Forms for easier unit testing; use async validators only when necessary.

Example use cases

• Login form with email and password: Reactive Forms for production, Signal Forms for a signals-based app prototype.
• Complex profile editor with nested address and dynamic phone numbers: Reactive Forms with FormArray and nested FormGroup.
• New app using signals: build forms with form(), export FormField bindings directly into inputs for automatic two-way updates.
• Migration plan: keep Reactive Forms in production modules and experiment with Signal Forms in feature branches before wider adoption.