5. Formularios de tipo Model (Reactive Forms)

Aquí pasamos a formularios reactivos, donde la definición está en la clase (TS).

Creamos el componente

ng generate component componentes/form-reactivo --standalone --skip-tests

Retocamos src/app/componentes/form-reactivo/form-reactivo.component.ts

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-form-reactivo',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <h2>Formulario Reactivo (Model-driven)</h2>

    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div>
        <label>Nombre</label>
        <input type="text" formControlName="nombre">
      </div>

      <div>
        <label>Apellidos</label>
        <input type="text" formControlName="apellidos">
      </div>

      <div>
        <label>Edad</label>
        <input type="number" formControlName="edad">
      </div>

      <div>
        <label>Dirección</label>
        <input type="text" formControlName="direccion">
      </div>

      <button type="submit">Enviar</button>
    </form>

    <h3>Datos del formulario</h3>
    <pre>{{ form.value | json }}</pre>
  `
})
export class FormReactivoComponent {
  form = new FormGroup({
    nombre: new FormControl(''),
    apellidos: new FormControl(''),
    edad: new FormControl(''),
    direccion: new FormControl('')
  });

  onSubmit() {
    console.log('Formulario reactivo:', this.form.value);
  }
}