Ng Forms

Angular Signal Forms

Build type-safe, reactive forms with Angular's Signal Forms API: a signal model is the single source of truth, the form structure is derived from it, and a schema function declares validation and field state. Signal Forms are public API in Angular v22 (imported from @angular/forms/signals).

For exhaustive API depth, read the angular-developer skill's canonical reference at ../angular-developer/references/signal-forms.md (vendored from Angular's official skill and corrected locally to the stable v22 API – see the local adaptations in 02-SKILLS.md before re-syncing it). The references below are the project-shaped fast path.

End-to-end example

import { Component, inject, signal } from '@angular/core';
import { form, FormField, required, email, submit } from '@angular/forms/signals';

@Component({
  selector: 'app-login',
  imports: [FormField],
  template: `
    <form (submit)="onSubmit($event)">
      <input type="email" [formField]="loginForm.email" />
      @if (loginForm.email().touched() && loginForm.email().invalid()) {
        <p class="error">{{ loginForm.email().errors()[0].message }}</p>
      }
      <input type="password" [formField]="loginForm.password" />
      <button [disabled]="loginForm().invalid()">Login</button>
    </form>
  `,
})
export class Login {
  private readonly auth = inject(AuthService);

  // Model signal is the single source of truth.
  protected readonly loginModel = signal({ email: '', password: '' });

  protected readonly loginForm = form(this.loginModel, (path) => {
    required(path.email, { message: 'Email is required' });
    email(path.email, { message: 'Enter a valid email address' });
    required(path.password, { message: 'Password is required' });
  });

  onSubmit(event: Event) {
    event.preventDefault();
    // submit() marks all fields touched, then runs the async action only if valid.
    submit(this.loginForm, async () => {
      await this.auth.login(this.loginModel());
    });
  }
}

Critical rules

Which reference to load

Verify – zero errors before done

Run from the repo root and confirm no errors:

• pnpm exec tsc --noEmit (or pnpm build)
• pnpm lint

There is no nx here – do not run nx lint.