Signal Forms Explained -| Forms with Signals

What are Signal Forms?

Signal Forms are also called:

  1. Signal Forms
  2. Forms with Signals
  3. Reactive Forms with Signals

All three mean the same thing.

They are introduced in Angular 21.

They were not available before.


Experimental Nature

Signal Forms are experimental.

They are not stable yet.

They should not be used in production applications.

Reasons:

  1. Security issues may exist
  2. Functional issues may exist
  3. API or properties may change in future versions

Angular official documentation also shows a warning that:

Signal Forms are experimental and API may change.


Where Can They Be Used?

  1. Learning
  2. Training
  3. Practice
  4. Experiments

Not for deployed server applications.


app.html (Input Fields)

<input type="text" placeholder="Enter Email" [field]="loginForm.email">

<br><br>

<input type="password" placeholder="Enter Password" [field]="loginForm.password">

<br><br>

<button (click)="login()">Login</button>
<button (click)="reset()">Reset</button>

<h3>{{ loginForm.email.value() }}</h3>
<h3>{{ loginForm.password.value().length }}</h3>


app.ts (Signal Form Code)

Required Import

import { form, field } from '@angular/forms/signals';


Login Model (Signal Collection)

loginModel = {
email: '',
password: ''
};


Creating Signal Form

loginForm = form(this.loginModel);


Login Function (Get Values)


login() {
console.log(this.loginForm.email.value());
console.log(this.loginForm.password.value());
}

.value() is used because it returns a function.


Reset Function (Clear Values)


reset() {
this.loginForm.email.set('');
this.loginForm.password.set('');
}

Key Observations

  1. Data is automatically synced between input and signal
  2. When input changes, signal value updates
  3. Values can be printed on UI
  4. Password should not be displayed directly
  5. Password length can be shown instead