diff --git a/docs/en/Community-Articles/2025-11-17-Angular-21-Signals/cover.png b/docs/en/Community-Articles/2025-11-17-Angular-21-Signals/cover.png new file mode 100644 index 0000000000..bc95388300 Binary files /dev/null and b/docs/en/Community-Articles/2025-11-17-Angular-21-Signals/cover.png differ diff --git a/docs/en/Community-Articles/2025-11-17-Angular-21-Signals/post.md b/docs/en/Community-Articles/2025-11-17-Angular-21-Signals/post.md new file mode 100644 index 0000000000..60fcc6405b --- /dev/null +++ b/docs/en/Community-Articles/2025-11-17-Angular-21-Signals/post.md @@ -0,0 +1,322 @@ +# Signal-Based Forms in Angular 21: Why You’ll Never Miss Reactive Forms Again + +Angular 21 introduces one of the most exciting developments in the modern edition of Angular: **Signal-Based Forms**. Built directly on the reactive foundation of Angular signals, this new experimental API provides a cleaner, more intuitive, strongly typed, and ergonomic approach for managing form state—without the heavy boilerplate of Reactive Forms. + +> ⚠️ **Important:** Signal Forms are *experimental*. +> Their API can change. Avoid using them in critical production scenarios unless you understand the risks. + +Despite this, Signal Forms clearly represent Angular’s future direction. +--- + +## Why Signal Forms? + +Traditionally in Angular, building forms has involved several concerns: + +- Tracking values +- Managing UI interaction states (touched, dirty) +- Handling validation +- Keeping UI and model in sync + +Reactive Forms solved many challenges but introduced their own: + +- Verbosity FormBuilder API +- Required subscriptions (valueChanges) +- Manual cleaning +- Difficult nested forms +- Weak type-safety + +**Signal Forms solve these problems through:** + +1." Automatic synchronization +2." Full type safety +3." Schema-based validation +4." Fine-grained reactivity +5." Drastically reduced boilerplate +6." Natural integration with Angular Signals + +--- + +### 1. Form Models — The Core of Signal Forms + +A **form model** is simply a writable signal holding the structure of your form data. + +```ts +import { Component, signal } from '@angular/core'; +import { form, Field } from '@angular/forms/signals'; + +@Component({ + selector: 'app-login', + imports: [Field], + template: ` + + + `, +}) +export class LoginComponent { + loginModel = signal({ + email: '', + password: '', + }); + + loginForm = form(this.loginModel); +} +``` + +Calling `form(model)` creates a **Field Tree** that maps directly to your model. + +--- + +### 2. Achieving Full Type Safety + +Although TypeScript can infer types from object literals, defining explicit interfaces provides maximum safety and better IDE support. + +```ts +interface LoginData { + email: string; + password: string; +} + +loginModel = signal({ + email: '', + password: '', +}); + +loginForm = form(loginModel); +``` + +Now: + +- `loginForm.email` → `FieldTree` +- Accessing invalid fields like `loginForm.username` results in compile-time errors + +This level of type safety surpasses Reactive Forms. + +--- + +### 3. Reading Form Values + +#### Read from the model (entire form): + +```ts +onSubmit() { + const data = this.loginModel(); + console.log(data.email, data.password); +} +``` + +#### Read from an individual field: + +```html +

Current email: {{ loginForm.email().value() }}

+``` + +Each field exposes: + +- `value()` +- `valid()` +- `errors()` +- `dirty()` +- `touched()` + +All as signals. + +--- + +### 4. Updating Form Models Programmatically + +Signal Forms allow three update methods. + +#### 1. Replace the entire model + +```ts +this.userModel.set({ + name: 'Alice', + email: 'alice@example.com', +}); +``` + +#### 2. Patch specific fields + +```ts +this.userModel.update(prev => ({ + ...prev, + email: newEmail, +})); +``` + +#### 3. Update a single field + +```ts +this.userForm.email().value.set(''); +``` + +This eliminates the need for: + +- `patchValue()` +- `setValue()` +- `formGroup.get('field')` + +--- + +### 5. Automatic Two-Way Binding With `[field]` + +The `[field]` directive enables perfect two-way data binding: + +```html + +``` + +#### How it works: + +- **User input → Field state → Model** +- **Model updates → Field state → Input UI** + +No subscriptions. +No event handlers. +No boilerplate. + +Reactive Forms could never achieve this cleanly. + +--- + +### 6. Nested Models and Arrays + +Models can contain nested object structures: + +```ts +userModel = signal({ + name: '', + address: { + street: '', + city: '', + }, +}); +``` + +Access fields easily: + +```html + +``` + +Arrays are also supported: + +```ts +orderModel = signal({ + items: [ + { product: '', quantity: 1, price: 0 } + ] +}); +``` + +Field state persists even when array items move, thanks to identity tracking. + +--- + +### 7. Schema-Based Validation + +Validation is clean and centralized: + +```ts +import { required, email } from '@angular/forms/signals'; + +const model = signal({ email: '' }); + +const formRef = form(model, { + email: [required(), email()], +}); +``` + +Field validation state is reactive: + +```ts +formRef.email().valid() +formRef.email().errors() +formRef.email().touched() +``` + +Validation no longer scatters across components. + +--- + +### 8. When Should You Use Signal Forms? + +#### New Angular 21+ apps +Signal-first architecture is the new standard. + +#### Teams wanting stronger type safety +Every field is exactly typed. + +#### Devs tired of Reactive Form boilerplate +Signal Forms drastically simplify code. + +#### Complex UI with computed reactive form state +Signals integrate perfectly. + +#### ❌ Avoid if: +- You need long-term stability +- You rely on mature Reactive Forms features +- Your app must avoid experimental APIs + +--- + +### 9. Reactive Forms vs Signal Forms + +| Feature | Reactive Forms | Signal Forms | +|--------|----------------|--------------| +| Boilerplate | High | Very low | +| Type-safety | Weak | Strong | +| Two-way binding | Manual | Automatic | +| Validation | Scattered | Centralized schema | +| Nested forms | Verbose | Natural | +| Subscriptions | Required | None | +| Change detection | Zone-heavy | Fine-grained | + +Signal Forms feel like the "modern Angular mode," while Reactive Forms increasingly feel legacy. + +--- + +### 10. Full Example: Login Form + +```ts +@Component({ + selector: 'app-login', + imports: [Field], + template: ` +
+ + + +
+ `, +}) +export class LoginComponent { + model = signal({ email: '', password: '' }); + form = form(this.model); + + submit() { + console.log(this.model()); + } +} +``` + +Minimal. Reactive. Completely type-safe. + +--- + +## **Conclusion** + +Signal Forms in Angular 21 represent a big step forward: + +- Cleaner API +- Stronger type safety +- Automatic two-way binding +- Centralized validation +- Fine-grained reactivity +- Dramatically better developer experience + + +Although these are experimental, they clearly show the future of Angular's form ecosystem. +Once you get into using Signal Forms, you may never want to use Reactive Forms again. + +---