signal-forms_skill

This skill helps you build type-safe Angular forms with built-in schema validation and real-time error handling for robust user input.

TypeScript

21

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill danielsogl/copilot-workflow-demo --skill signal-forms

SKILL.md9.6 KB

Overview

This skill provides a concise guide to building type-safe, signal-driven forms with Angular Signal Forms (experimental in Angular v21+). It explains schema-based validation, field state access, cross-field checks, dynamic arrays, and integration patterns for templates and material form fields. Use it to create predictable, reactive form logic with explicit validation rules and computed form state.

How this skill works

Define a TypeScript interface for your form model and create a schema using schema<T>((f) => { ... }) with built-in validators (required, email, minLength, pattern, etc.) or custom validate callbacks. Create a signal() for your model and call form(modelSignal, schema) to produce a form object whose fields expose state methods (value, valid, errors, touched, dirty, pending). Bind fields with the Field directive in templates and read field methods to show errors, enable buttons, and compute derived signals for submit readiness.

When to use it

Building Angular forms where you want type-safe validation tied to the model type
When you need schema-driven, reusable validation logic across components
Implementing cross-field rules (password confirmation, related fields)
Managing dynamic arrays of nested inputs (hobbies, addresses, items)
When you want reactive computed signals for overall form validity and submit enabling

Best practices

Define a clear TypeScript interface for your form state and keep schemas close to the model
Expose reusable schemas from domain or models directory to avoid duplication
Show validation messages only when field.touched() or field.dirty() to avoid noisy UIs
Track errors by error.kind to keep stable lists and avoid rendering flicker
Use computed signals for derived UI state (isValid, isDirty, canSubmit) and OnPush change detection
Guard experimental API usage in production plans—Angular Signal Forms are experimental (v21+)

Example use cases

User registration form with email, password strength checks, and password confirmation
Profile edit with nested address validation and ZIP code pattern enforcement
Dynamic list of hobbies or contacts where items are added/removed with per-item validators
Admin panel forms that reuse domain-level validation schemas across several components
Material-design inputs with mat-form-field and per-field mat-error rendering

FAQ

Yes. Use validate(field, fn) returning customError({...}) or null to implement complex or cross-field rules.

How do I handle arrays of dynamic items?

Use applyEach(f.arrayField, (item) => { ... }) inside the schema and update the model signal to add or remove items; form fields map to each array item.

When should I show error messages?

Only show errors when field.touched() or field.dirty() to avoid showing validation messages on initial render.