Formularios en Angular: Cómo elegir entre Template-Driven, Reactive y Signal-Driven Forms

import { Component } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
 
@Component({
  selector: 'app-flights-template',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './flights-template.component.html'
})
export class FlightsTemplateComponent {
  flightType = 'roundtrip';
  from = '';
  to = '';
  depart = '';
  returnDate = '';
  passengers = 1;
  passengerOptions = [1, 2, 3, 4, 5];
 
  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Flight booking query:', form.value);
    }
  }
}

<form #flightForm="ngForm" (ngSubmit)="onSubmit(flightForm)" novalidate>
  <!-- Radios para el tipo de vuelo -->
  <fieldset class="form-group">
    <legend>Flight Type:</legend>
    <label>
      <input type="radio" name="flightType" value="roundtrip" [(ngModel)]="flightType" required />
      Round trip
    </label>
    <label>
      <input type="radio" name="flightType" value="oneway" [(ngModel)]="flightType" required />
      One way
    </label>
  </fieldset>
 
  <!-- Aeropuerto de origen -->
  <div class="form-group">
    <label for="fromAirport">From:</label>
    <select id="fromAirport" name="from" [(ngModel)]="from" required>
      <option value="" disabled>Select origin airport</option>
      <option value="JFK">New York (JFK)</option>
      <option value="LAX">Los Angeles (LAX)</option>
    </select>
  </div>
 
  <!-- Fecha de regreso condicional con Control Flow moderno -->
  @if (flightType === 'roundtrip') {
    <div class="form-group">
      <label for="returnDate">Return Date:</label>
      <input type="date" id="returnDate" name="returnDate" [(ngModel)]="returnDate" required />
    </div>
  }
 
  <!-- Botón de envío -->
  <button type="submit" [disabled]="!flightForm.valid" class="btn-primary">
    Search Flights
  </button>
</form>

import { Component, inject } from '@angular/core';
import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 
@Component({
  selector: 'app-flights-reactive',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './flights-reactive.component.html'
})
export class FlightsReactiveComponent {
  private readonly fb = inject(FormBuilder);
 
  readonly flightForm = this.fb.group({
    flightType: this.fb.control('roundtrip', { nonNullable: true, validators: [Validators.required] }),
    from: this.fb.control('', { nonNullable: true, validators: [Validators.required] }),
    to: this.fb.control('', { nonNullable: true, validators: [Validators.required] }),
    depart: this.fb.control('', { nonNullable: true, validators: [Validators.required] }),
    returnDate: this.fb.control(''),
    passengers: this.fb.control(1, { nonNullable: true, validators: [Validators.required] }),
  });
 
  onSubmit() {
    if (this.flightForm.valid) {
      console.log('Reactive form submission:', this.flightForm.getRawValue());
    }
  }
}

<form [formGroup]="flightForm" (ngSubmit)="onSubmit()" novalidate>
  <fieldset class="form-group">
    <legend>Flight Type:</legend>
    <label>
      <input type="radio" formControlName="flightType" value="roundtrip" />
      Round trip
    </label>
    <label>
      <input type="radio" formControlName="flightType" value="oneway" />
      One way
    </label>
  </fieldset>
 
  <div class="form-group">
    <label for="rf-from">From:</label>
    <select id="rf-from" formControlName="from">
      <option value="" disabled>Select origin airport</option>
      <option value="JFK">New York (JFK)</option>
      <option value="LAX">Los Angeles (LAX)</option>
    </select>
  </div>
 
  @if (flightForm.controls.flightType.value === 'roundtrip') {
    <div class="form-group">
      <label for="rf-return">Return Date:</label>
      <input type="date" id="rf-return" formControlName="returnDate" />
    </div>
  }
 
  <button type="submit" [disabled]="flightForm.invalid" class="btn-primary">
    Search Flights
  </button>
</form>

import { Component, signal, computed } from '@angular/core';
 
@Component({
  selector: 'app-flights-signals',
  standalone: true,
  templateUrl: './flights-signals.component.html'
})
export class FlightsSignalsComponent {
  // 1. Signals para el estado primitivo del formulario
  readonly flightType = signal<'roundtrip' | 'oneway'>('roundtrip');
  readonly from = signal('');
  readonly to = signal('');
  readonly depart = signal('');
  readonly returnDate = signal('');
  readonly passengers = signal(1);
 
  // 2. Validaciones calculadas a nivel de campo
  readonly isFromValid = computed(() => this.from().trim().length > 0);
  readonly isToValid = computed(() => this.to().trim().length > 0 && this.to() !== this.from());
  readonly isDepartValid = computed(() => this.depart().trim().length > 0);
  readonly isReturnValid = computed(() => {
    if (this.flightType() === 'oneway') return true;
    return this.returnDate().trim().length > 0 && this.returnDate() >= this.depart();
  });
 
  // 3. Validez calculada a nivel de formulario (cero código repetitivo)
  readonly isFormValid = computed(() => 
    this.isFromValid() &&
    this.isToValid() &&
    this.isDepartValid() &&
    this.isReturnValid() &&
    this.passengers() >= 1
  );
 
  onSubmit(event: Event) {
    event.preventDefault();
    if (this.isFormValid()) {
      const payload = {
        flightType: this.flightType(),
        from: this.from(),
        to: this.to(),
        depart: this.depart(),
        returnDate: this.flightType() === 'roundtrip' ? this.returnDate() : null,
        passengers: this.passengers(),
      };
      console.log('Signal form payload:', payload);
    }
  }
}

<form (submit)="onSubmit($event)" novalidate>
  <fieldset class="form-group">
    <legend>Flight Type:</legend>
    <label>
      <input
        type="radio"
        name="flightType"
        value="roundtrip"
        [checked]="flightType() === 'roundtrip'"
        (change)="flightType.set('roundtrip')"
      />
      Round trip
    </label>
    <label>
      <input
        type="radio"
        name="flightType"
        value="oneway"
        [checked]="flightType() === 'oneway'"
        (change)="flightType.set('oneway')"
      />
      One way
    </label>
  </fieldset>
 
  <div class="form-group">
    <label for="sig-from">From:</label>
    <select
      id="sig-from"
      [value]="from()"
      (change)="from.set($any($event.target).value)"
    >
      <option value="" disabled>Select origin airport</option>
      <option value="JFK">New York (JFK)</option>
      <option value="LAX">Los Angeles (LAX)</option>
    </select>
  </div>
 
  @if (flightType() === 'roundtrip') {
    <div class="form-group">
      <label for="sig-return">Return Date:</label>
      <input
        type="date"
        id="sig-return"
        [value]="returnDate()"
        (input)="returnDate.set($any($event.target).value)"
      />
      @if (!isReturnValid() && returnDate()) {
        <p class="text-red-500 text-xs">Return date must be after departure date.</p>
      }
    </div>
  }
 
  <button type="submit" [disabled]="!isFormValid()" class="btn-primary">
    Search Flights
  </button>
</form>