Using Strictly Typed Reactive Forms in Angular

// ⚠️ Untyped Angular Forms (v2 – v13)
export class CheckoutComponent {
  purchaseForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
    amount: new FormControl(0),
  });
 
  submit() {
    // 1. String-based get() has zero typo protection:
    const amountVal = this.purchaseForm.get('amout')?.value; // Typo in string! Compiles fine, fails at runtime.
 
    // 2. Value was typed as 'any', forcing unsafe operations:
    const total = amountVal + 5; // Might accidentally concatenate string if API returned string!
  }
}

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
 
export interface PurchaseForm {
  name: FormControl<string>;
  email: FormControl<string>;
  amount: FormControl<number>;
  newsletter: FormControl<boolean | null>; // Explicitly optional/nullable
}
 
@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html',
})
export class CheckoutComponent {
  purchaseForm = new FormGroup<PurchaseForm>({
    name: new FormControl('', { nonNullable: true }),
    email: new FormControl('', { nonNullable: true }),
    amount: new FormControl(0, { nonNullable: true }),
    newsletter: new FormControl(false),
  });
 
  submit(): void {
    // Direct dot-notation with full autocomplete & strict types:
    const name: string = this.purchaseForm.controls.name.value;
    const amount: number = this.purchaseForm.controls.amount.value;
 
    console.log(`Submitting order for ${name} totaling $${amount}`);
  }
}

// checkout.component.ts (Modern Standalone & Typed Forms)
import { Component, inject } from '@angular/core';
import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
@Component({
  selector: 'app-checkout',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="name">Full Name</label>
        <input id="name" type="text" formControlName="name" />
      </div>
 
      <div class="form-group">
        <label for="email">Email Address</label>
        <input id="email" type="email" formControlName="email" />
      </div>
 
      <div class="form-group">
        <label for="amount">Amount ($)</label>
        <input id="amount" type="number" formControlName="amount" />
      </div>
 
      <button type="submit" [disabled]="form.invalid">Submit Payment</button>
    </form>
  `,
})
export class CheckoutComponent {
  // NonNullableFormBuilder automatically creates nonNullable controls for every field!
  private fb = inject(NonNullableFormBuilder);
 
  readonly form = this.fb.group({
    name: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email]],
    amount: [10, [Validators.required, Validators.min(1)]],
  });
 
  onSubmit(): void {
    if (this.form.invalid) return;
 
    // form.getRawValue() produces a clean, non-nullable strongly-typed object:
    // { name: string; email: string; amount: number }
    const payload = this.form.getRawValue();
    console.log('Valid Payload:', payload);
  }
}

import { Component, inject } from '@angular/core';
import { FormRecord, FormControl, NonNullableFormBuilder } from '@angular/forms';
 
@Component({
  selector: 'app-permissions',
  standalone: true,
  template: `...`,
})
export class PermissionsComponent {
  private fb = inject(NonNullableFormBuilder);
 
  // FormRecord allows adding and removing controls dynamically with strict value types
  permissionsRecord: FormRecord<FormControl<boolean>> = this.fb.record({
    canRead: this.fb.control(true),
    canWrite: this.fb.control(false),
  });
 
  addPermission(permissionKey: string): void {
    // Type safe: only accepts FormControl<boolean>
    this.permissionsRecord.addControl(permissionKey, this.fb.control(false));
  }
}