forms_skill

Overview

This skill teaches building both reactive and template-driven Angular forms, creating custom and async validators, implementing cross-field validation, and generating dynamic form structures. It focuses on practical patterns for form controls, arrays, state management, error display, and testing to deliver robust, user-friendly forms.

How this skill works

It inspects form control types (FormControl, FormGroup, FormArray) and shows how to configure validators, async validators, and cross-field rules. The skill demonstrates wiring templates, form builders, and reactive patterns, plus dynamic form generation and state handling for validation feedback and submission flows.

When to use it

• Building complex forms with conditional sections, computed values, or dynamic fields
• Adding server-side and client-side validation including async checks (e.g., unique email)
• Creating reusable validation logic and cross-field constraints (e.g., password confirmation)
• Implementing dynamic lists of inputs with FormArray
• Choosing between template-driven and reactive approaches based on complexity and testability
• Testing form logic and validation in unit tests

Best practices

• Prefer reactive forms for complex validation, computed values, and better unit testing
• Use template-driven forms for simple, quick data-binding scenarios
• Always validate on both client and server; never trust client-only checks
• Disable submit actions until the form is valid to prevent invalid submissions
• Show validation messages after controls are touched or dirty to avoid noisy UX
• Debounce and cancel async validators and handle pending state to avoid race conditions

Example use cases

• Registration form with real-time async email availability check and password confirmation
• Dynamic order form where users can add/remove items using FormArray
• Nested address/customer forms using FormBuilder groups for clear structure
• Template-driven contact form for simple sites with minimal validation
• Unit tests covering validation rules, async validators, and submit behavior