Signals in Angular Forms – A Modern Reactive Approach

In this tutorial, you’ll learn how to use Signals in Angular Forms with practical examples.

Forms are an essential part of web applications.

In Angular, you can use two types of forms: Template-Driven Forms or Reactive Forms.

What are Angular Signals?

Signals are a reactive state management feature that automatically updates the UI when the value changes.

Example:

import { signal } from '@angular/core';

name = signal('');

Note: Whenever the value changes, Angular automatically updates the UI.

Why Use Signals in Forms?

There are many advantages to using Signals in Forms

1. You can use Signals in forms for Simpler state management.

2. You can use Signals in forms for automatic UI updates.

3. You can use Signals in forms for Less boilerplate code.

4. You can use Signals in forms for Better performance.

Basic Example: Signals in Angular Form

In Component file:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent {

  name = signal('');
  email = signal('');

  submitForm() {
    console.log(this.name(), this.email());
  }
}

In Template file:

<input 
  type="text"
  placeholder="Enter Name"
  (input)="name.set($event.target.value)"
>

<input 
  type="email"
  placeholder="Enter Email"
  (input)="email.set($event.target.value)"
>

<button (click)="submitForm()">Submit</button>

Note: When users type in the input fields, the signals update automatically.

Signals vs Reactive Forms

When to Use Signals in Angular Forms

There are many reasons to use signals in Angular Forms

1. You can use signals when building simple forms.

2. You can use signals when managing local form state.

3. You can use signals when creating small UI interactions.

Conclusion

Signals provide a modern and lightweight way to manage form state in Angular.

Reactive Forms is better for complex forms with advanced validation.