Angular Forms — Reactive Forms and Signal Forms Preview (Angular 21+)

This lesson introduces Angular forms — capturing and validating user input. You will build a contact form with Reactive Forms (production-ready today) and preview Signal Forms (experimental in Angular 21+) for signal-native form state.

Prerequisites: Lessons 1–6. Estimated time: 50–60 minutes.

1. Reactive Forms Setup

Import reactive forms in your standalone component:

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <label>Name</label>
      <input formControlName="name" />
      @if (form.controls.name.invalid && form.controls.name.touched) {
        <p>Name is required.</p>
      }
      <label>Email</label>
      <input formControlName="email" type="email" />
      <button type="submit" [disabled]="form.invalid">Send</button>
    </form>
  `,
})
export class ContactForm {
  private readonly fb = inject(FormBuilder);

  form = this.fb.nonNullable.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
  });

  submit() {
    if (this.form.invalid) return;
    console.log(this.form.getRawValue());
  }
}

2. Validation Patterns

• Built-in validators — required, email, minLength
• Cross-field validation — attach validators to the FormGroup
• Display errors — check invalid and touched on controls

3. Signal Forms (Experimental Preview)

Angular 21 introduces Signal Forms as an experimental API — forms whose state is backed by signals instead of RxJS-heavy control streams. Watch the official Angular blog for stable API names; the direction is type-safe, composable form models aligned with signals-first apps.

Until Signal Forms stabilizes, use Reactive Forms for production and refactor when the API graduates from experimental.

4. Submit to an API

Combine with Lesson 6 — inject HttpClient in a service and POST form.getRawValue() on submit. Always validate on the server too.

5. Next Steps

You have completed the beginner Angular 21+ track. For CRUD apps, Material UI, and Spring Boot backends, continue on munonye.com Angular tutorials or explore live classes at Alkademy.

Frequently Asked Questions

Reactive Forms vs template-driven forms?
Reactive Forms scale better — explicit model, easier testing, dynamic fields. Template-driven suits very simple inputs.

Are Signal Forms ready for production?
Not yet — treat them as a preview in Angular 21. Use Reactive Forms for shipping apps today.