✨ Angular Signal-Based Forms: A New Era of Reactivity

Angular is evolving fast—and Signal-Based Forms are one of the most exciting experimental features in Angular v17+. They bring a fresh, reactive, and streamlined approach to form management, making form handling simpler, faster, and smarter.

This post explores how signal-based forms work, why they matter, and how to implement them in a real-world scenario.

---

💡 What Are Signals?

Signals are Angular’s new reactive primitive, built for fine-grained reactivity without the boilerplate and subscription headaches of observables. They track state changes automatically and trigger updates only where needed—leading to more efficient rendering and cleaner state flow.

---

🤔 Why Signal-Based Forms?

Forms are core to most Angular apps, but managing them—especially when they grow large or complex—can become a mess. Signal-Based Forms aim to fix that with:

• Performance Boosts – Less boilerplate and fewer re-renders
• Simplified Logic – No more subscribing/unsubscribing to field changes
• Reactive by Default – Automatically responds to field updates

---

🧪 Real-World Example: User Profile Form

Let’s break down a basic user profile form built using Signal-Based Forms.

---

📁 user-profile.component.ts

import { Component, signal, computed } from "@angular/core";
import { FormsModule, Validators } from "@angular/forms";
import { JsonPipe } from "@angular/common";

@Component({
  standalone: true,
  selector: "app-user-profile",
  templateUrl: "./user-profile.component.html",
  styleUrls: ["./user-profile.component.scss"],
  imports: [FormsModule, JsonPipe],
})
export class UserProfileComponent {
  firstName = signal("");
  lastName = signal("");
  email = signal("");
  phoneNumbers = signal([signal("")]);
  street = signal("");

  formValue = computed(() => ({
    firstName: this.firstName(),
    lastName: this.lastName(),
    email: this.email(),
    phoneNumbers: this.phoneNumbers().map((p) => p()),
    address: {
      street: this.street(),
    },
  }));

  formValid = computed(() => {
    const { firstName, lastName, email, phoneNumbers, address } = this.formValue();

    const EMAIL_REGEX = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    const isEmailValid = EMAIL_REGEX.test(email);

    return (
      firstName.length > 0 &&
      lastName.length > 0 &&
      email.length > 0 &&
      isEmailValid &&
      phoneNumbers.length > 0 &&
      phoneNumbers.every((p) => p.length > 0) &&
      address.street.length > 0
    );
  });

  addPhoneNumber() {
    this.phoneNumbers.update((list) => [...list, signal("")]);
  }

  removePhoneNumber(index: number) {
    this.phoneNumbers.update((list) => {
      list.splice(index, 1);
      return [...list];
    });
  }
}

---

🧾 user-profile.component.html

<form class="form">
  <label for="firstName">First Name</label>
  <input type="text" id="firstName" [(ngModel)]="firstName" required />

  <label for="lastName">Last Name</label>
  <input type="text" id="lastName" [(ngModel)]="lastName" required />

  <label for="email">Email</label>
  <input type="email" id="email" [(ngModel)]="email" required />

  <div id="phoneNumbers">
    <label>Phone Numbers</label>
    @for (phone of phoneNumbers(); track i; let i = $index) {
      <div>
        <input type="tel" [(ngModel)]="phone" required />
        <button type="button" (click)="removePhoneNumber(i)">Remove</button>
      </div>
    }
    <button type="button" (click)="addPhoneNumber()">Add Phone Number</button>
  </div>

  <label for="street">Street</label>
  <input type="text" id="street" [(ngModel)]="street" required />

  @if (!formValid()) {
    <div class="message message--error">Form is invalid!</div>
  } @else {
    <div class="message message--success">Form is valid!</div>
  }

  <pre>{{ formValue() | json }}</pre>
</form>

---

✅ Key Takeaways

• Fully Reactive: Changes are reflected instantly without FormGroup, FormControl, or manual tracking.
• Cleaner Code: Signals reduce the boilerplate and complexity that often accompanies Angular forms.
• Experimental But Powerful: This is still in early stages, but already shows how Angular is evolving toward modern reactivity patterns.

---

🙌 Shoutout to Fellow Devs

If you’re exploring Angular Signals or love geeking out on clean code and modern web dev practices, go check out Code With Bilal (aka @codewithbilal). He shares tons of solid dev tips and insightful content on Angular, AI, and software architecture. Definitely worth a follow if you’re serious about leveling up your skills.

---

🛣️ Looking Ahead

Signal-Based Forms are still experimental—but they offer a glimpse into the future of form handling in Angular. If Angular doubles down on this direction, we’re in for simpler, faster, and more reactive applications—without the usual complexity.

Have you tried Signal-Based Forms yet? I’d love to hear your thoughts.