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)

RxJS & Angular best practices with examples

Why You Should Not Put Any Logic in the RxJS Subscribe Callback in Angular

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

What Does Subject Mean in RxJS?

By allow, deny or redirect to other page-view. It's very simple to secure Angular pages using route-guards.

Use Angular Route-Guards to Secure Angular Pages

Understand Angular's forRoot and forChild

An alternative way of tracking the element’s visibility.

How to Track the Element’s Visibility in Angular

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

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

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…

Angular

Angular Signal Forms: Experimental (Future of Reactive Forms)

Why You Should Not Put Any Logic in the RxJS Subscribe Callback in Angular

What Does Subject Mean in RxJS?

Use Angular Route-Guards to Secure Angular Pages

Understand Angular's forRoot and forChild

How to Track the Element’s Visibility in Angular

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

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

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

Simplifying Angular Project Management with a Custom Makefile

Main Menu

Follow Us

Angular

Angular Signal Forms: Experimental (Future of Reactive Forms)

Why You Should Not Put Any Logic in the RxJS Subscribe Callback in Angular

What Does Subject Mean in RxJS?

Use Angular Route-Guards to Secure Angular Pages

Understand Angular's forRoot and forChild

How to Track the Element’s Visibility in Angular

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

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

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

Simplifying Angular Project Management with a Custom Makefile