How to Use Signal Forms in Angular 21 (With Examples)

Forms in Angular have always been one of those things that feel simultaneously powerful and awkward. Reactive Forms let you control every aspect, but they come with boilerplate, a steep learning curve, and mental juggling. Template-driven forms feel simpler at first, but they break down with dynamic requirements or complex validation.

Angular 21 introduces Signal Forms, an experimental approach designed to simplify form building while keeping full reactivity. This article is a deep dive for those who are familiar with Angular and want to learn more about Signal Forms: we’ll cover why Signal Forms matter, how to use them, and what best practices make them shine.

Why Signal Forms?

At their core, Signal Forms ask a simple question: what if the form didn’t manage state?

Instead of creating FormControl trees and patching values, you start with your data model, and Angular generates a reactive form API from it.

There are a few key benefits that Signal Forms offer over Reactive Forms:

• Less boilerplate: no nested FormGroups or FormArrays to manually wire.

• Automatic dynamic fields: optional properties, arrays, or nested objects appear or disappear as the model changes.

• Reactive state without subscriptions: each field exposes signals for value, touched state, validity, and errors.

• Simpler validation: validators live next to the schema; cross-field rules are easy to reason about.

Signal Forms start simple, then scale naturally as applications grow.

How Signal Forms Work

Think of a signal as the single source of truth for your data. Everything in the form reflects this model.

Building a Signal Form is as simple as defining the shape of data, creating a signal to represent that data, and passing the signal to the form function.

Here’s a simple example of a flight booking form:

interface Booking {
  passengerName: string;
  departureDate: string;
  flightNumber: string;
  seatNumber: string;
}

bookingModel = signal<Booking>({
  passengerName: "",
  departureDate: "",
  flightNumber: "",
  seatNumber: "",
});

bookingForm = form(this.bookingModel);

At this point:

• Each property of bookingModel becomes a reactive field.

• Dynamic updates to the model reflect in the form immediately.

Binding Fields in Templates

Signal Forms provide a simple directive for template binding:

<input [field="bookingForm.passengerName" />
<input [field="bookingForm.flightNumber" type="text" />

You no longer need (ngModelChange) or manually updating a FormControl. The [field] directive handles:

• Reading values from the model.

• Writing user input back to the model.

• Triggering validation automatically.

Kudos to the Angular team for making this so simple!

Validation Made Simple

Validation was another pain point in Angular forms. Validators could be scattered throughout the component, template, and other areas of the codebase.

With Signal Forms, validators are now co-located with your schema, making rules easy to find and maintain.

bookingForm = form(this.bookingModel, (schemaPath: SchemaPath<Booking>) => {
  required(schemaPath.passengerName);
  minLength(schemaPath.passengerName, 2);

  required(schemaPath.departureDate);

  required(schemaPath.flightNumber);

  required(schemaPath.seatNumber);
  pattern(schemaPath.seatNumber, /^[A-F]\d+$/);
});

Each field exposes signals for errors, invalidity, and touched state, which means you can write simple computed helpers to check the form state:

const isFormInvalid = computed(() => bookingForm().invalid());

Although a bit more complex, cross-field validation is much simpler with Signal Forms; each error is attached to the field it affects.

Here's an example with an evolved version of our flight booking form where we have a return date field that must be after the departure date field:

validateTree(root, (context) => {
  const { departureDate, returnDate } = context.value();
  if (
    departureDate &&
    returnDate &&
    new Date(returnDate) <= new Date(departureDate)
  ) {
    return {
      field: context.field.returnDate!,
      kind: "return-after-departure",
      message: "Return date must be after departure date",
    };
  }
  return undefined;
});

Dynamic Fields and Nested Objects

Signal Forms reflect the shape of your data automatically. Optional fields, arrays, and nested objects “just work.”

For example, adding a flights array is as simple as updating the models:

interface Flight {
  id: string;
  flightNumber: string;
  seatNumber: string;
}

interface Booking {
  passengerName: string;
  departureDate: string;
  flights: Flight[];
}

// ... existing code ...
bookingModel.update((b) => ({
  ...b,
  flights: [...b.flights, { ...newFlight }],
}));

A few things to point out:

• Each new flight is automatically added to the form.

• Validators for new flights are applied automatically.

• Removing an item from the array updates the form immediately.

No FormArray.push() or manual wiring is required. This is a breath of fresh air and you can focus on the data, not the mechanics.

Thought

No patching, no subscriptions, no syncing. The model is always up-to-date. And it's so nice!

Custom Components Without ControlValueAccessor

One of the biggest pain points in Angular forms is writing a ControlValueAccessor for custom inputs. Signal Forms eliminate this by utilizing the new Signal APIs we've been given over the last several updates.

rating = model<number>(0);

<star-rating [field="bookingForm.rating" />

The star-rating component now binds directly to a field signal. Validation and model updates happen automatically.

Submitting Forms

A Signal Form is simply a signal that represents your data. When it's time to submit your data to your backend, you can do so easily by reading the signal.

submit() {
  const booking = this.bookingModel();
  // send to backend
}

Wrapping It Up: Why Signal Forms Matter

Signal Forms are more than just a new API - they represent a shift in how we think about forms in Angular. Instead of the form managing the data, your data drives the form. This simple change makes building, validating, and updating forms far more intuitive.

Here’s what to remember as you start experimenting:

• Data-first mindset: Your model is the source of truth. The form reflects it automatically.
• Less boilerplate: No manual FormGroups, FormArrays, or ControlValueAccessor juggling.
• Automatic dynamic fields: Optional properties, nested objects, and arrays work out of the box.
• Validation is simple: Rules live alongside your schema; cross-field validation attaches errors precisely where they belong.
• Full reactivity without subscriptions: Each field exposes signals, letting your UI stay in sync effortlessly.

Signal Forms are still experimental, but they already offer a modern, approachable way to build Angular forms. When you adopt this pattern, your forms become cleaner, easier to reason about, and more maintainable.

If you want a full example based on the concepts discussed in this article, you can check out my Signal Forms example on GitHub.