Angular 21 de Cero a Experto / Formularios

Reto: el formulario de nuevo gasto, validado y accesible

Reto35 min60 XP

Vas a construir la puerta de datos de "Mi Bolsillo": el formulario reactivo de "nuevo gasto", con validación completa (integrada y custom), errores accesibles y la lógica probada en vivo. Es el formulario que usará tu app durante todo el curso —hoy lo dejas listo con estándar profesional—.

Reto

Formulario reactivo de gasto: validación completa

Media35 min60 XP(×2 sin mirar la solución)

Qué debes construir

Un formulario reactivo (FormGroup) para crear un gasto, con:

Campos: nombre (requerido, sin solo espacios), valor (requerido, mínimo 1, máximo 10.000.000), categoria (requerido, una de la lista).
Un validador custom noSoloEspacios para el nombre.
Errores accesibles: cada campo con aria-invalid, aria-describedby y mensajes con role="alert", mostrados solo cuando el campo es invalid && touched.
Envío: si es inválido, markAllAsTouched() y no envía; si es válido, produce el objeto Gasto limpio (nombre recortado).

Y la LÓGICA de validación pura probada en vivo: valida el objeto del formulario y devuelve los errores por campo o el gasto listo.

Reglas

Reactivo (nada de ngModel), con FormBuilder y validadores.
El validador noSoloEspacios debe ser una función pura reutilizable.
La validación en vivo debe reportar errores por campo, no solo un booleano.

35:00

Cuando estés listo, arranca el reloj.

El razonamiento. Un buen formulario hace tres cosas bien: valida en el modelo (no confía en el HTML), comunica los errores con cortesía y accesibilidad, y produce datos LIMPIOS. La validación vive en la clase como código testeable (validadores integrados + tu noSoloEspacios); los errores se muestran solo cuando el usuario terminó el campo (invalid && touched) y se anuncian a lectores de pantalla con ARIA; y al enviar, se recorta el nombre para no guardar espacios sobrantes. El markAllAsTouched() es el detalle que evita que un "Guardar" sobre campos vacíos parezca no hacer nada: revela todos los errores de golpe.

Primero, el componente Angular completo:

nuevo-gasto.component.ts

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

export interface Gasto { nombre: string; valor: number; categoria: string; }

function noSoloEspacios(): ValidatorFn {
return (c: AbstractControl): ValidationErrors | null =>
  String(c.value ?? '').trim().length === 0 ? { soloEspacios: true } : null;
}

@Component({
selector: 'app-nuevo-gasto',
imports: [ReactiveFormsModule],
template: `
  <form [formGroup]="form" (ngSubmit)="guardar()">
    <label for="nombre">Nombre</label>
    <input id="nombre" formControlName="nombre"
      [attr.aria-invalid]="nombre.invalid && nombre.touched"
      [attr.aria-describedby]="nombre.invalid && nombre.touched ? 'nombre-error' : null" />
    @if (nombre.invalid && nombre.touched) {
      <p id="nombre-error" role="alert">El nombre es obligatorio.</p>
    }

    <label for="valor">Monto</label>
    <input id="valor" type="number" formControlName="valor"
      [attr.aria-invalid]="valor.invalid && valor.touched"
      [attr.aria-describedby]="valor.invalid && valor.touched ? 'valor-error' : null" />
    @if (valor.invalid && valor.touched) {
      <p id="valor-error" role="alert">El monto debe ser mayor que cero.</p>
    }

    <label for="categoria">Categoría</label>
    <select id="categoria" formControlName="categoria">
      <option value="">Elige…</option>
      <option value="comida">Comida</option>
      <option value="transporte">Transporte</option>
      <option value="ocio">Ocio</option>
    </select>

    <button [disabled]="form.invalid">Guardar</button>
  </form>
`,
})
export class NuevoGastoComponent {
private fb = inject(FormBuilder);
creado = output<Gasto>();

form = this.fb.group({
  nombre: ['', [Validators.required, noSoloEspacios()]],
  valor: [0, [Validators.required, Validators.min(1), Validators.max(10_000_000)]],
  categoria: ['', Validators.required],
});

get nombre() { return this.form.controls.nombre; }
get valor() { return this.form.controls.valor; }

guardar() {
  if (this.form.invalid) { this.form.markAllAsTouched(); return; }
  const v = this.form.getRawValue();
  this.creado.emit({ nombre: v.nombre!.trim(), valor: v.valor!, categoria: v.categoria! });
  this.form.reset({ nombre: '', valor: 0, categoria: '' });
}
}

Y la lógica de validación pura, en vivo:

Qué observar: validar devuelve un objeto de errores POR CAMPO —justo lo que necesita el template para mostrar el mensaje correcto junto a cada input—. procesar solo produce el gasto si todo pasa, y lo devuelve LIMPIO (nombre recortado). Esta lógica es TypeScript puro, testeable sin Angular: en el componente real, los Validators y tu noSoloEspacios hacen el mismo trabajo, y el ARIA lo vuelve accesible. Acabas de construir la puerta de datos de tu app con estándar profesional.

Qué sigue

Terminaste el módulo de formularios: sabes capturar datos con validación robusta y accesibilidad real. Notaste que valueChanges es un Observable y que toSignal lo conecta a señales. El próximo módulo desentraña ese mundo: RxJS a gran escala —Observables, operadores, higher-order, y la interop con señales—. La herramienta de Angular para flujos de eventos asíncronos: búsquedas en vivo, autocompletado, tiempo real.