Uso de Reactive Forms con tipado estricto en Angular

// ⚠️ Formularios de Angular sin tipado (v2 a v13)
export class CheckoutComponent {
  purchaseForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
    amount: new FormControl(0),
  });
 
  submit() {
    // 1. get() basado en cadenas no ofrece ninguna protección contra errores tipográficos:
    const amountVal = this.purchaseForm.get('amout')?.value; // ¡Error en el texto! Compila bien, pero falla en tiempo de ejecución.
 
    // 2. El valor tenía tipo 'any', lo que permitía operaciones inseguras:
    const total = amountVal + 5; // ¡Podría concatenar texto por accidente si la API devolvía un 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>; // Explícitamente opcional o que admite null
}
 
@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 {
    // Notación de punto directa con autocompletado total y tipos estrictos:
    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 (Standalone moderno y 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 crea automáticamente controles nonNullable para cada campo!
  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() produce un objeto limpio, fuertemente tipado y sin tipos nulos:
    // { 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 permite agregar y eliminar controles de forma dinámica con tipos de valores estrictos
  permissionsRecord: FormRecord<FormControl<boolean>> = this.fb.record({
    canRead: this.fb.control(true),
    canWrite: this.fb.control(false),
  });
 
  addPermission(permissionKey: string): void {
    // Seguro en tipos: solo acepta FormControl<boolean>
    this.permissionsRecord.addControl(permissionKey, this.fb.control(false));
  }
}