reference-signal-forms

Explain the Angular Signal Forms architecture with WritableSignal sources and FieldTree proxies.

Updated Nov 24, 2021

Search Tags:#documentation #frontend #angular #type-checking #signal-forms #forms-architecture

Ready to run

npx skills add https://github.com/ishiyan/Mbng --skill reference-signal-forms-ishiyan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: reference-signal-forms
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/angular-reference-signal-forms
Command: npx skills add https://github.com/ishiyan/Mbng --skill reference-signal-forms-ishiyan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Clarifies the mental model and architecture of the Angular Signal Forms system used in packages/forms/signals, helping developers reason about model-driven values, field proxies, and schema-based rules when working with signals.

Core Features & Use Cases

Mental model: WritableSignal<T> serves as the single source of truth, with forms projecting UI state.
Proxy-based traversal: The FieldTree proxy enables accessing nested fields without manual control creation.
Schema-driven rules: Validation, disabled state, and metadata are defined separately and applied to the form.
Directive glue: A dedicated [formField] directive binds DOM elements to FieldNodes and syncs state.

Quick Start

Define a model using WritableSignal, apply a schema, create a form with form or apply, and bind fields using the [formField] directive.

Frequently Asked Questions about reference-signal-forms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do signal-based forms in Angular work?▼

Angular signal-based forms use a WritableSignal as the single source of truth, projecting UI state through FieldTree proxies and a dedicated [formField] directive that binds DOM elements to FieldNodes.

How do I access nested fields in Angular signal forms without manual control creation?▼

You access nested fields using the FieldTree proxy, which enables traversal of nested form structures without manually creating form controls for each level of the schema.

How do I apply schema-driven validation and disabled state to Angular signal forms?▼

You define validation, disabled state, and metadata separately in a schema, then apply that schema to the form built on the WritableSignal to enforce rules across the signal-based form architecture.

What is the best way to bind DOM elements to FieldNodes in Angular signal forms?▼

The best way to bind DOM elements is using the [formField] directive, which acts as directive glue to sync state between the DOM elements and the FieldNodes in the signal form.

Does the Angular signal forms architecture support type-checking across components and directives?▼

Yes, the signal forms architecture supports type-checking by applying schema-based rules and FieldTree proxies across components and directives, ensuring type-safe wiring of signal-based forms.