The `#Angular` team is brewing something exciting in the experimental labs — [**Signal Forms**](https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental). While still in its early PoC (Proof of Concept) stage, this innovative feature is shaping up to redefine how we approach forms in Angular😉.

![](https://cdn-images-1.medium.com/max/1600/1*gNAHvyzk6j0g-M1kqYvKWw.png)

Angular Signal Forms: Experimental (Your **data model is the single source of truth)**

Let’s kick things off with the basics of Signal Forms: the `form()` function and the powerful `Field` object — the heart of this new reactive paradigm.

### The Main Idea: You Own the Data

At the core of [Angular Signal Forms](https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental) is a simple but powerful philosophy:

> ***The library does not manage the form state —*** **you *do.***

Your **data model is the single source of truth**, managed via Angular’s `WritableSignal`, and the form fields directly reflect this signal. The new API doesn’t introduce a parallel state system — it fully leans into the reactive capabilities of signals.

```
const userModel = signal<User>({ fullName: '', email: '', password: '', agreeToTerms: false});
```

### The `form()` Function

To create a Signal Form, you call the `form()` function with your model:

```
const userForm: Field<User> = form(userModel);
```

**This does two things:**

* Creates a **root Field object** representing the form.
* Automatically generates **nested Field objects** for each key in the data model.

**What’s more:**

* Any updates made to the model (`userModel`) immediately reflect in the form fields.
* Any changes the user makes via the `userForm` fields will directly mutate the underlying model.

This two-way reactive binding is what makes Signal Forms elegant and intuitive.

### The `Field` Object

The `Field` object is the **cornerstone** of Signal Forms. Every form is essentially a root `Field`, and each property of your model becomes a sub-`Field`.

Each `Field` carries a special property called `$state`, which encapsulates its internal status via 5 signals:

### `FieldState` Signals

```
userForm.email.$state.value(); // ''
```

1. **`value`**: A `WritableSignal<T>` representing the current field value.
2. **`valid`**: A `Signal<boolean>` indicating if the field (and its children) are valid.
3. **`errors`**: A `Signal<FormError[] | undefined>` with errors of the form `{ kind: string, message?: string }`.
4. **`disabled`**: A `Signal<boolean>` indicating if the field or any ancestor is disabled.
5. **`touched`**: A `Signal<boolean>` showing if the user has interacted with the field.

**These signals give you full control to:**

* Update values,
* Show validation messages,
* Handle disabled states,
* Track user interaction.

### Navigating Fields

You can access deeply nested fields just like accessing properties in your object:

```
const emailField = userForm.email;const passwordField = userForm.password;const termsField = userForm.agreeToTerms;
```

This feels intuitive and mirrors your model’s structure exactly — no abstractions, no indirection.

### Signal Forms in a Nutshell

* **Use `form()`** on a signal model to create your form.
* **Model and UI stay in sync**, thanks to writable signals.
* Each form element is a `Field`, which exposes `$state` with:
* `value`, `valid`, `errors`, `disabled`, `touched`
* The form’s structure mirrors your data model — it’s predictable and type-safe.

### Building a Deeply Nested Form with Signal Forms:

Angular’s new **Signals** combined with the experimental **Signal Forms** API provide a powerful way to build reactive forms with deep nested data structures — including arrays! In this guide, we’ll walk through creating a standalone component that manages a user profile form with nested skills and experience arrays, fully typed and reactive.

> *⚠️* Reminder: Signal Forms are still experimental and only available in the `prototype/signal-forms` branch of Angular. You need to clone and build Angular from that branch to run this.

### Define the Data Model (Nested Fields)

We start by defining interfaces that represent the shape of our data. The `UserProfile` contains arrays of `Skill` and `Experience`:

```
interface Skill { name: string; level: string; // e.g. Beginner, Intermediate, Expert}interface Experience { company: string; role: string; years: number;}interface UserProfile { name: string; bio: string; skills: Skill[]; experience: Experience[];}
```

### Create a Signal to Hold the Data (Nested Fields)

We initialize a writable signal with the initial user profile data:

```
profileModel = signal<UserProfile>({ name: '', bio: '', skills: [{ name: '', level: '' }], experience: [{ company: '', role: '', years: 0 }]});
```

### Build a Nested Signal Form (Nested Fields)

Using Angular’s `form()` method, we define validations for each field. For arrays, we use `$each` to apply validators to every element:

```
profileForm: Field<UserProfile> = form(this.profileModel);
```

### Access Nested Fields Easily

You can access deeply nested fields using array indexes, for example:

```
const firstSkillNameField = this.profileForm.skills[0].name;const firstExperienceCompanyField = this.profileForm.experience[0].company;
```

Angular’s new **Signals** combined with the experimental **Signal Forms** API provide a powerful way to build reactive forms with deep nested data structures — including arrays! In this guide, we’ll walk through creating a standalone component that manages a user profile form with nested skills and experience arrays, fully typed and reactive.

[**angular/packages/forms/experimental at prototype/signal-forms · angular/angular**
*Deliver web apps with confidence 🚀. Contribute to angular/angular development by creating an account on GitHub.*&#x67;ithub.com](https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental "https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental")

[**Enhancements to forms for future signal forms · Issue #59114 · angular/angular**
*Which @angular/\* package(s) are relevant/related to the feature request? forms Description Template and reactive forms…*&#x67;ithub.com](https://github.com/angular/angular/issues/59114 "https://github.com/angular/angular/issues/59114")

The <code>#Angular</code> team is brewing something exciting in the experimental labs — <a href="https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental">Signal Forms</a>. While still in its early PoC (Proof of Concept) stage, this innovative feature is shaping up to redefine how we approach forms in Angular😉.
<img src="https://cdn-images-1.medium.com/max/1600/1*gNAHvyzk6j0g-M1kqYvKWw.png" alt="">
Angular Signal Forms: Experimental (Your data model is the single source of truth)
Let’s kick things off with the basics of Signal Forms: the <code>form()</code> function and the powerful <code>Field</code> object — the heart of this new reactive paradigm.
<h3 id="the-main-idea-you-own-thedata">The Main Idea: You Own the Data</h3>
At the core of <a href="https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental">Angular Signal Forms</a> is a simple but powerful philosophy:
<blockquote>
The library does not manage the form state — you do.
</blockquote>
Your data model is the single source of truth, managed via Angular’s <code>WritableSignal</code>, and the form fields directly reflect this signal. The new API doesn’t introduce a parallel state system — it fully leans into the reactive capabilities of signals.
<pre><code class="code-highlight">const userModel = signal&#x3C;User>({ fullName: '', email: '', password: '', agreeToTerms: false});
</code></pre>
<h3 id="the-formfunction">The <code>form()</code> Function</h3>
To create a Signal Form, you call the <code>form()</code> function with your model:
<pre><code class="code-highlight">const userForm: Field&#x3C;User> = form(userModel);
</code></pre>
This does two things:
<ul>
<li>Creates a root Field object representing the form.</li>
<li>Automatically generates nested Field objects for each key in the data model.</li>
</ul>
What’s more:
<ul>
<li>Any updates made to the model (<code>userModel</code>) immediately reflect in the form fields.</li>
<li>Any changes the user makes via the <code>userForm</code> fields will directly mutate the underlying model.</li>
</ul>
This two-way reactive binding is what makes Signal Forms elegant and intuitive.
<h3 id="the-fieldobject">The <code>Field</code> Object</h3>
The <code>Field</code> object is the cornerstone of Signal Forms. Every form is essentially a root <code>Field</code>, and each property of your model becomes a sub-<code>Field</code>.
Each <code>Field</code> carries a special property called <code>$state</code>, which encapsulates its internal status via 5 signals:
<h3 id="fieldstate-signals"><code>FieldState</code> Signals</h3>
<pre><code class="code-highlight">userForm.email.$state.value(); // ''
</code></pre>
<ol>
<li><code>value</code>: A <code>WritableSignal&#x3C;T></code> representing the current field value.</li>
<li><code>valid</code>: A <code>Signal&#x3C;boolean></code> indicating if the field (and its children) are valid.</li>
<li><code>errors</code>: A <code>Signal&#x3C;FormError[] | undefined></code> with errors of the form <code>{ kind: string, message?: string }</code>.</li>
<li><code>disabled</code>: A <code>Signal&#x3C;boolean></code> indicating if the field or any ancestor is disabled.</li>
<li><code>touched</code>: A <code>Signal&#x3C;boolean></code> showing if the user has interacted with the field.</li>
</ol>
These signals give you full control to:
<ul>
<li>Update values,</li>
<li>Show validation messages,</li>
<li>Handle disabled states,</li>
<li>Track user interaction.</li>
</ul>
<h3 id="navigating-fields">Navigating Fields</h3>
You can access deeply nested fields just like accessing properties in your object:
<pre><code class="code-highlight">const emailField = userForm.email;const passwordField = userForm.password;const termsField = userForm.agreeToTerms;
</code></pre>
This feels intuitive and mirrors your model’s structure exactly — no abstractions, no indirection.
<h3 id="signal-forms-in-anutshell">Signal Forms in a Nutshell</h3>
<ul>
<li>Use <code>form()</code> on a signal model to create your form.</li>
<li>Model and UI stay in sync, thanks to writable signals.</li>
<li>Each form element is a <code>Field</code>, which exposes <code>$state</code> with:</li>
<li><code>value</code>, <code>valid</code>, <code>errors</code>, <code>disabled</code>, <code>touched</code></li>
<li>The form’s structure mirrors your data model — it’s predictable and type-safe.</li>
</ul>
<h3 id="building-a-deeply-nested-form-with-signalforms">Building a Deeply Nested Form with Signal Forms:</h3>
Angular’s new Signals combined with the experimental Signal Forms API provide a powerful way to build reactive forms with deep nested data structures — including arrays! In this guide, we’ll walk through creating a standalone component that manages a user profile form with nested skills and experience arrays, fully typed and reactive.
<blockquote>
⚠️ Reminder: Signal Forms are still experimental and only available in the <code>prototype/signal-forms</code> branch of Angular. You need to clone and build Angular from that branch to run this.
</blockquote>
<h3 id="define-the-data-model-nestedfields">Define the Data Model (Nested Fields)</h3>
We start by defining interfaces that represent the shape of our data. The <code>UserProfile</code> contains arrays of <code>Skill</code> and <code>Experience</code>:
<pre><code class="code-highlight">interface Skill { name: string; level: string; // e.g. Beginner, Intermediate, Expert}interface Experience { company: string; role: string; years: number;}interface UserProfile { name: string; bio: string; skills: Skill[]; experience: Experience[];}
</code></pre>
<h3 id="create-a-signal-to-hold-the-data-nestedfields">Create a Signal to Hold the Data (Nested Fields)</h3>
We initialize a writable signal with the initial user profile data:
<pre><code class="code-highlight">profileModel = signal&#x3C;UserProfile>({ name: '', bio: '', skills: [{ name: '', level: '' }], experience: [{ company: '', role: '', years: 0 }]});
</code></pre>
<h3 id="build-a-nested-signal-form-nestedfields">Build a Nested Signal Form (Nested Fields)</h3>
Using Angular’s <code>form()</code> method, we define validations for each field. For arrays, we use <code>$each</code> to apply validators to every element:
<pre><code class="code-highlight">profileForm: Field&#x3C;UserProfile> = form(this.profileModel);
</code></pre>
<h3 id="access-nested-fieldseasily">Access Nested Fields Easily</h3>
You can access deeply nested fields using array indexes, for example:
<pre><code class="code-highlight">const firstSkillNameField = this.profileForm.skills[0].name;const firstExperienceCompanyField = this.profileForm.experience[0].company;
</code></pre>
Angular’s new Signals combined with the experimental Signal Forms API provide a powerful way to build reactive forms with deep nested data structures — including arrays! In this guide, we’ll walk through creating a standalone component that manages a user profile form with nested skills and experience arrays, fully typed and reactive.
<a href="https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental" title="https://github.com/angular/angular/tree/prototype/signal-forms/packages/forms/experimental">angular/packages/forms/experimental at prototype/signal-forms · angular/angular
Deliver web apps with confidence 🚀. Contribute to angular/angular development by creating an account on GitHub.github.com</a>
<a href="https://github.com/angular/angular/issues/59114" title="https://github.com/angular/angular/issues/59114">Enhancements to forms for future signal forms · Issue #59114 · angular/angular
Which @angular/* package(s) are relevant/related to the feature request? forms Description Template and reactive forms…github.com</a>

Angular Signal Forms: Experimental (Future of Reactive Forms)

You can grasp BehaviorSubject, ReplaySubject, and AsyncSubject in minutes.

What Does Subject Mean in RxJS?

Exploring the intricate world of the MEAN stack: A journey from MERN to MEAN stack, with a special emphasis on Angular’s role in shaping modern web development.

The MEAN Stack: A Comprehensive Guide for Developers with a MERN Stack Background

Exploring the intricate world of the MEAN stack: A journey from MERN to MEAN, with a special emphasis on Angular’s role in shaping modern web development.

The MEAN Stack: A Comprehensive Guide for Developers with MERN Background

Simplifying Angular Project Management with a Custom Makefile

Similar to JavaScript’s if statement, Angular’s @if control flow block allows developers to conditionally display parts of a template. Consider the following example in a user-controls.component.ts…

Angular 17 — Master Conditional statements @if, @else, @switch, @for

Angular 17 — Master Conditional statements @if, @else, @switch, @for

Hello there, I want to discuss a fascinating subject with you all. That about sums up how to install our Angular application in AWS S3. To efficiently and affordably offer static web content to…

Step-by-Step Guide: Hosting Your Angular Application on AWS S3

A complete guide on setting up a proxy in Angular for API calls behind a corporate proxy or with Windows authentication

All You Need to Know About Angular Proxy Configuration

Step by Step Guide to Upgrade Angular App From CSS to SCSS

A step-by-step tutorial for creating a multi-page bank claim form using Angular and SurveyJS, a free, open-source JavaScript library.

Angular

Angular Signal Forms: Experimental (Future of Reactive Forms)

What Does Subject Mean in RxJS?

The MEAN Stack: A Comprehensive Guide for Developers with MERN Background

Simplifying Angular Project Management with a Custom Makefile

Angular 17 — Master Conditional statements @if, @else, @switch, @for

Step-by-Step Guide: Hosting Your Angular Application on AWS S3

All You Need to Know About Angular Proxy Configuration

Step by Step Guide to Upgrade Angular App From CSS to SCSS

Create a Bank Claim Form Using Angular and SurveyJS

Add Angular 15 Missing Files

Main Menu

Follow Us

Angular

Angular Signal Forms: Experimental (Future of Reactive Forms)

What Does Subject Mean in RxJS?

The MEAN Stack: A Comprehensive Guide for Developers with MERN Background

Simplifying Angular Project Management with a Custom Makefile

Angular 17 — Master Conditional statements @if, @else, @switch, @for

Step-by-Step Guide: Hosting Your Angular Application on AWS S3

All You Need to Know About Angular Proxy Configuration

Step by Step Guide to Upgrade Angular App From CSS to SCSS

Create a Bank Claim Form Using Angular and SurveyJS

Add Angular 15 Missing Files