5. Plantillas, control flow y formularios

<p>Hola, {{ usuario.nombre }}</p>                    <!-- texto: siempre escapado -->
<p>{{ total > 0 ? 'Con tareas' : 'Vacío' }}</p>      <!-- ternario -->
<p>{{ apodo ?? 'sin apodo' }}</p>                   <!-- coalescencia -->
<p>{{ precio * unidades | currency:'EUR' }}</p>     <!-- aritmética + pipe -->
<img src="/avatares/{{ usuario.id }}.png" alt="Avatar de {{ usuario.nombre }}">
<a [href]="enlaceDelUsuario">Perfil</a>             <!-- saneado: javascript: se neutraliza -->

<button (click)="guardar()">Guardar</button>
<input (input)="onInput($event)">               <!-- $event = evento nativo -->
<input (keydown.enter)="buscar()">              <!-- Angular filtra la tecla por ti -->
<input (keydown.escape)="cancelar()">
<div (keydown.control.shift.z)="rehacer()"></div>
<div (keydown.code.keyk)="abrirPaleta()"></div>  <!-- código físico de la tecla -->
<app-task-row (eliminar)="borrar($event)" />    <!-- $event = valor emitido -->
<form [formGroup]="form" (ngSubmit)="enviar()"></form>   <!-- ngSubmit evita la recarga -->

onInput(event: Event): void {
  const input = event.target as HTMLInputElement;   // el estrechamiento se hace en la CLASE
  this.termino.set(input.value);
}
onSoltar(event: DragEvent): void {
  event.preventDefault();          // se llama aquí, nunca en la plantilla
  this.procesar(event.dataTransfer?.files);
}

<app-contador [(valor)]="total" />                                <!-- estas dos líneas -->
<app-contador [valor]="total" (valorChange)="total = $event" />   <!-- son lo MISMO -->
<input [(ngModel)]="nombre" name="nombre">                        <!-- ngModel / ngModelChange -->
<input [ngModel]="nombre" (ngModelChange)="nombre = $event" name="nombre">

@Component({
  selector: 'app-contador',
  template: `<button (click)="bajar()" aria-label="Restar">-</button>
             <output>{{ valor() }}</output>
             <button (click)="subir()" aria-label="Sumar">+</button>`,
})
export class ContadorComponent {
  // model() crea a la vez la entrada 'valor' y la salida 'valorChange'. Es una
  // señal escribible: al hacer set/update, Angular emite el cambio solo.
  readonly valor = model.required<number>();
  readonly limite = model<number>(10);
  subir(): void { this.valor.update((v) => Math.min(v + 1, this.limite())); }
  bajar(): void { this.valor.update((v) => Math.max(v - 1, 0)); }
}

<div [class.activa]="esActiva" [class.error]="control.invalid"></div>  <!-- individual -->
<div [class]="{ activa: esActiva, error: hayError }"></div>           <!-- mapa, sin NgClass -->
<div [class]="['chip', tipo]"></div>                                  <!-- array o cadena -->
<div [style.width.px]="ancho" [style.color]="colorHex"></div>         <!-- unidad en el binding -->
<div [style.width.%]="porcentaje"></div>
<div [style]="{ width: ancho + 'px', opacity: opacidad }"></div>
<div [style.--color-acento]="tema.acento"></div>                      <!-- variable CSS -->
<div [ngClass]="{ activa: esActiva }" [ngStyle]="{ 'font-size.px': tam }"></div>

<input #buscador placeholder="Buscar">                    <!-- #ref nativa = HTMLElement -->
<button (click)="buscar(buscador.value); buscador.focus()">Ir</button>
<app-modal #modal />                                      <!-- #ref componente = INSTANCIA -->
<button (click)="modal.abrir()">Abrir</button>
<form #f="ngForm" (ngSubmit)="enviar(f.value)"></form>    <!-- #ref="exportAs" = directiva -->
<input #ctrl="ngModel" [(ngModel)]="email" name="email" required email>
<p>{{ ctrl.invalid && ctrl.touched ? 'Email no válido' : '' }}</p>
@let usuario = usuario$ | async;                          <!-- estable desde Angular 19 -->
@let saludo = usuario ? 'Hola, ' + usuario.nombre : 'Invitado';
<h2>{{ saludo }}</h2>
<p>Tienes {{ usuario?.tareas?.length ?? 0 }} tareas</p>

@if (cargando()) {
  <app-spinner />
} @else if (error()) {
  <p role="alert" class="error">{{ error() }}</p>
} @else {
  <app-lista [tareas]="tareas()" />
}
<!-- Alias 'as': evalúa UNA vez y reutiliza. Además estrecha el tipo. -->
@if (usuario$ | async; as usuario) { <p>{{ usuario.nombre }} ({{ usuario.email }})</p> }
@if (tareaSeleccionada(); as tarea) { <app-detalle [tarea]="tarea" /> }

@for (tarea of tareas(); track tarea.id) {
  <li [class.par]="$even">
    <span class="num">{{ $index + 1 }} de {{ $count }}</span>
    {{ tarea.titulo }}
    @if ($first) { <span class="chip">Primera</span> }
    @if ($last)  { <span class="chip">Última</span> }
  </li>
} @empty {
  <li class="muted">No hay tareas que mostrar.</li>
}
<!-- Renombrar las variables implícitas cuando hay bucles anidados -->
@for (proy of proyectos(); track proy.id; let iProy = $index) {
  @for (t of proy.tareas; track t.id; let iTarea = $index) {
    <p>{{ iProy }}.{{ iTarea }} — {{ t.titulo }}</p>
  }
}
<!-- track admite cualquier expresión, incluida una llamada al componente -->
@for (fila of filas(); track claveDeFila(fila)) { <tr><td>{{ fila.n }}</td></tr> }

@switch (tarea.estado) {
  @case ('pendiente')  { <span class="chip">Pendiente</span> }
  @case ('en_curso')   { <span class="chip new">En curso</span> }
  @case ('completada') { <span class="chip core">Completada</span> }
  @default             { <span class="chip adv">Desconocido</span> }
}

@defer (on viewport; prefetch on idle) {
  <app-grafico-avanzado [datos]="serie()" />
} @placeholder (minimum 300ms) {
  <div class="skeleton" style="height:280px"></div>
} @loading (after 100ms; minimum 500ms) {
  <app-spinner />
} @error {
  <p role="alert">No se ha podido cargar. <button (click)="recargar()">Reintentar</button></p>
}

<!-- Varios disparadores separados por ';' actúan como un OR -->
@defer (on hover; on timer(5s); prefetch on idle) {
  <app-vista-previa [id]="id" />
} @placeholder { <div class="preview-box">Pasa el ratón para la vista previa</div> }
<!-- Disparador anclado a otro elemento mediante su referencia -->
<button #abrir>Ver comentarios</button>
@defer (on interaction(abrir); prefetch on hover(abrir)) {
  <app-comentarios [tareaId]="tarea.id" />
} @placeholder { <p class="muted">Los comentarios se cargarán al pulsar.</p> }
<!-- when con una señal: control total desde la clase -->
@defer (when pestanaActiva() === 'estadisticas') { <app-estadisticas /> }

# Migración automática (Angular 17+): reescribe *ngIf/*ngFor/[ngSwitch] a bloques
ng generate @angular/core:control-flow
# Revisa SIEMPRE el resultado: elige 'track $index' cuando no encuentra un id claro
git diff

<tr><ng-container *ngTemplateOutlet="celdas; context: { $implicit: fila }"></ng-container></tr>
<!-- $implicit se recibe con 'let-x' sin nombre; el resto, con let-x="clave" -->
<ng-template #celdas let-fila let-i="indice" let-total="total">
  <td>{{ i }} / {{ total }}</td>
  <td>{{ fila.titulo }}</td>
</ng-template>
<ng-container [ngTemplateOutlet]="celdas"
              [ngTemplateOutletContext]="{ $implicit: filaA, indice: 0, total: 2 }"></ng-container>

export interface FilaCtx<T> { $implicit: T; indice: number; ultima: boolean; }
/** Directiva marcadora: da un tipo al ng-template y permite tipar 'let-x'. */
@Directive({ selector: '[appFila]' })
export class FilaDirective<T> {
  static ngTemplateContextGuard<T>(d: FilaDirective<T>, c: unknown): c is FilaCtx<T> { return true; }
}
@Component({
  selector: 'app-tabla',
  imports: [NgTemplateOutlet],
  template: `
    <table><caption>{{ titulo() }}</caption><tbody>
      @for (item of datos(); track claveDe()(item); let i = $index, ultima = $last) {
        <tr><ng-container [ngTemplateOutlet]="filaTpl() ?? null"
          [ngTemplateOutletContext]="{ $implicit: item, indice: i, ultima: ultima }">
        </ng-container></tr>
      } @empty {
        <tr><td class="muted">{{ textoVacio() }}</td></tr>
      }
    </tbody></table>`,
})
export class TablaComponent<T> {
  readonly datos = input.required<readonly T[]>();
  readonly claveDe = input.required<(item: T) => string | number>();
  readonly titulo = input(''); readonly textoVacio = input('Sin resultados');
  // Recoge el ng-template marcado con appFila que el padre ha proyectado
  readonly filaTpl = contentChild(FilaDirective, { read: TemplateRef });
}

<app-tabla [datos]="tareas()" [claveDe]="porId" titulo="Mis tareas">
  <ng-template appFila let-tarea let-i="indice" let-ultima="ultima">
    <td>{{ i + 1 }}</td>
    <td><a [routerLink]="['/tareas', tarea.id]">{{ tarea.titulo }}</a></td>
    <td>{{ tarea.vence | date:'shortDate' }}</td>
    <td>@if (ultima) { <span class="chip">Último</span> }</td>
  </ng-template>
</app-tabla>

@Component({
  selector: 'app-widget',
  imports: [NgComponentOutlet],
  template: `@if (componente(); as cmp) {
    <ng-container [ngComponentOutlet]="cmp" [ngComponentOutletInputs]="entradas()"></ng-container>
  }`,
})
export class WidgetComponent {
  readonly tipo = input.required<'grafico' | 'tabla'>();
  readonly config = input<Record<string, unknown>>({});
  readonly entradas = computed(() => ({ config: this.config() }));  // desde Angular 16.2
  readonly componente = computed(() => REGISTRO[this.tipo()] ?? null);
}

import { registerLocaleData } from '@angular/common';
import localeEs from '@angular/common/locales/es';
import localeEsExtra from '@angular/common/locales/extra/es';
registerLocaleData(localeEs, 'es-ES', localeEsExtra);
bootstrapApplication(AppComponent, {
  providers: [
    { provide: LOCALE_ID, useValue: 'es-ES' },
    { provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' },
  ],
});

<p>{{ tarea.creada | date:'dd/MM/yyyy HH:mm' }}</p>
<p>{{ tarea.creada | date:'short':'+0200':'en-US' }}</p>   <!-- zona y locale puntuales -->
<p>{{ 1234.5 | number:'1.2-2' }}</p>                       <!-- 1.234,50 -->
<p>{{ 0.1234 | percent:'1.1-1' }}</p>                      <!-- 12,3 % -->
<p>{{ precio | currency:'EUR':'symbol':'1.2-2' }}</p>
<p>{{ tarea.titulo | slice:0:40 | titlecase }}</p>          <!-- encadenado, izq. a der. -->
<p>{{ base + iva | currency:'EUR' }}</p>                   <!-- ¡aplica a (base + iva)! -->

private readonly fb = inject(NonNullableFormBuilder);
// Opción A: construcción manual. Verbosa pero explícita.
readonly manual = new FormGroup({
  titulo: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
  etiquetas: new FormArray<FormControl<string>>([]),
});
// Opción B: FormBuilder. La forma habitual en producción.
readonly form = this.fb.group({
  titulo:    this.fb.control('', [Validators.required, Validators.maxLength(120)]),
  prioridad: this.fb.control<'baja' | 'media' | 'alta'>('media'),
  // Un control puede admitir null explícitamente aunque el builder sea nonNullable
  responsableId: this.fb.control<number | null>(null),
  etiquetas: this.fb.array<FormControl<string>>([]),
  plazo: this.fb.group({ desde: this.fb.control(''), hasta: this.fb.control('') }),
});
// Acceso tipado al FormArray: SIEMPRE con un getter, nunca con 'as any'
get etiquetas(): FormArray<FormControl<string>> { return this.form.controls.etiquetas; }
anadirEtiqueta(v = ''): void {
  this.etiquetas.push(this.fb.control(v, [Validators.required, Validators.maxLength(24)]));
}
quitarEtiqueta(i: number): void {
  this.etiquetas.removeAt(i);
  this.etiquetas.markAsDirty();   // removeAt no marca el array como sucio por sí solo
}

// SORPRESA 1: por defecto todo control admite null, porque reset() sin
// argumentos devuelve el control a null.
const c1 = new FormControl('hola');                        // FormControl<string | null>
c1.reset();  c1.value;                                     // null
const c2 = new FormControl('hola', { nonNullable: true }); // FormControl<string>
c2.reset();  c2.value;                                     // 'hola' ← vuelve al INICIAL
// SORPRESA 2: form.value es Partial cuando hay controles deshabilitados.
const form = new FormGroup({
  email:  new FormControl('a@b.c', { nonNullable: true }),
  codigo: new FormControl('X-1',   { nonNullable: true }),
});
form.controls.codigo.disable();
form.value;          // Partial<{email: string; codigo: string}> → { email: 'a@b.c' }
form.getRawValue();  // { email: string; codigo: string } → { email: 'a@b.c', codigo: 'X-1' }
// Derivar el tipo del formulario sin duplicar la definición
type TareaValor = ReturnType<typeof form.getRawValue>;
// FormRecord: claves dinámicas, controles del mismo tipo. Útil para
// "un checkbox por permiso" cuando los permisos vienen del servidor.
const permisos = new FormRecord<FormControl<boolean>>({});
for (const p of permisosDelServidor) {
  permisos.addControl(p.clave, new FormControl(p.activo, { nonNullable: true }));
}
// Escotilla de emergencia: FormGroup<any> desactiva el tipado del grupo. Válido
// en un motor de formularios genérico; jamás en código de negocio.
const dinamico: FormGroup<any> = this.fb.group({});

readonly enviado = signal(false);
mostrarError(nombre: keyof typeof this.form.controls): boolean {
  const c = this.form.controls[nombre];
  return c.invalid && (c.touched || this.enviado());
}
enviar(): void {
  this.enviado.set(true);
  if (this.form.invalid) {
    // Marca TODO el árbol como touched: sin esto, un formulario que el
    // usuario no ha tocado no muestra ningún error al pulsar Guardar.
    this.form.markAllAsTouched();
    this.enfocarPrimerError();
    return;
  }
  this.api.crear(this.form.getRawValue()).subscribe();
}

const email = new FormControl('', {
  nonNullable: true,
  validators: [Validators.required, Validators.email],
  asyncValidators: [emailDisponible(api)],
  updateOn: 'blur',        // el validador asíncrono se ejecuta UNA vez, al salir
});
// A nivel de grupo se hereda en los hijos que no lo especifiquen
const form = this.fb.group({ /* ... */ }, { updateOn: 'blur' });
// Con 'blur' y 'submit', value NO se actualiza mientras se escribe: si tienes un
// contador de caracteres en vivo, ese campo debe quedarse en 'change'.

// Si el tipo de tarea es 'recurrente', la periodicidad pasa a ser obligatoria
this.form.controls.tipo.valueChanges.pipe(takeUntilDestroyed()).subscribe((tipo) => {
  const p = this.form.controls.periodicidad;
  if (tipo === 'recurrente') {
    p.setValidators([Validators.required, Validators.min(1)]);
    p.enable({ emitEvent: false });
  } else {
    p.clearValidators();
    p.reset('', { emitEvent: false });
    p.disable({ emitEvent: false });
  }
  // SIN esta línea los validadores nuevos no se aplican hasta el siguiente
  // cambio de valor: el formulario parece "válido por error".
  p.updateValueAndValidity({ emitEvent: false });
});

readonly termino = new FormControl('', { nonNullable: true });
// 1) Observable → señal: una sola suscripción, cancelada al destruir el componente
readonly texto = toSignal(
  this.termino.valueChanges.pipe(debounceTime(300), map((t) => t.trim()), distinctUntilChanged()),
  { initialValue: '' },
);
// 2) Búsqueda con cancelación de la petición anterior
readonly resultados$ = this.termino.valueChanges.pipe(
  startWith(this.termino.value),          // valueChanges NO emite el valor actual
  debounceTime(300),
  distinctUntilChanged(),
  switchMap((q) => this.api.buscar(q)),   // switchMap cancela la búsqueda anterior
);
// 3) Estado del formulario como señal
readonly estado = toSignal(this.form.statusChanges, { initialValue: this.form.status });
readonly puedeEnviar = computed(() => this.estado() === 'VALID');

export interface CampoConfig {
  clave: string; etiqueta: string;
  tipo: 'texto' | 'numero' | 'fecha' | 'seleccion' | 'booleano';
  valorInicial?: unknown; obligatorio?: boolean; minLength?: number; max?: number;
  opciones?: readonly { valor: string; texto: string }[];
}
/** Traduce la configuración declarativa a validadores de Angular. */
function validadoresDe(c: CampoConfig): ValidatorFn[] {
  const v: ValidatorFn[] = [];
  if (c.obligatorio) v.push(Validators.required);
  if (c.minLength !== undefined) v.push(Validators.minLength(c.minLength));
  if (c.max !== undefined) v.push(Validators.max(c.max));
  return v;
}
export function construirFormulario(campos: readonly CampoConfig[]): FormGroup {
  const controles: Record<string, FormControl> = {};
  for (const c of campos) {
    const inicial = c.valorInicial ?? (c.tipo === 'booleano' ? false : '');
    controles[c.clave] = new FormControl(inicial, { nonNullable: true, validators: validadoresDe(c) });
  }
  return new FormGroup(controles);
}

<form [formGroup]="form" (ngSubmit)="enviar()">
  @for (campo of campos(); track campo.clave) {
    <div class="campo">
      <label [attr.for]="campo.clave">{{ campo.etiqueta }}</label>
      @switch (campo.tipo) {
        @case ('booleano') { <input type="checkbox" [id]="campo.clave" [formControlName]="campo.clave"> }
        @case ('seleccion') {
          <select [id]="campo.clave" [formControlName]="campo.clave">
            @for (o of campo.opciones ?? []; track o.valor) { <option [value]="o.valor">{{ o.texto }}</option> }
          </select>
        }
        @default { <input [id]="campo.clave" [type]="tipoHtml(campo)" [formControlName]="campo.clave"> }
      }
      <app-errores [control]="form.get(campo.clave)!" />
    </div>
  }
  <button type="submit">Guardar</button>
</form>

/** Validador de CONTROL parametrizado (patrón factoría). */
export function sinEspacios(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const valor = control.value as string | null;
    if (valor === null || valor === '') return null;    // no dupliques 'required'
    return /\s/.test(valor) ? { sinEspacios: true } : null;
  };
}
export function prohibido(...palabras: readonly string[]): ValidatorFn {
  const set = new Set(palabras.map((p) => p.toLowerCase()));
  return (control) => set.has(String(control.value ?? '').toLowerCase())
    ? { prohibido: { valor: control.value } } : null;
}
/** Validador de GRUPO (cross-field): confirmar contraseña. */
export const contrasenasCoinciden: ValidatorFn = (grupo): ValidationErrors | null => {
  const pass = grupo.get('password')?.value;
  const conf = grupo.get('confirmacion')?.value;
  if (!pass || !conf) return null;                      // aún no molestamos al usuario
  return pass === conf ? null : { contrasenasDistintas: true };
};
/** Validador de GRUPO: rango de fechas coherente. */
export function rangoFechas(campoDesde: string, campoHasta: string): ValidatorFn {
  return (grupo) => {
    const desde = grupo.get(campoDesde)?.value as string | null;
    const hasta = grupo.get(campoHasta)?.value as string | null;
    if (!desde || !hasta || new Date(desde) <= new Date(hasta)) return null;
    // Además del error del grupo, marcamos el control concreto para pintar el
    // borde rojo en el campo correcto SIN borrar sus otros errores.
    const ctrl = grupo.get(campoHasta);
    ctrl?.setErrors({ ...(ctrl.errors ?? {}), rangoInvertido: true });
    return { rangoFechas: { desde, hasta } };
  };
}

readonly form = this.fb.group(
  {
    email:        this.fb.control('', [Validators.required, Validators.email]),
    password:     this.fb.control('', [Validators.required, Validators.minLength(10)]),
    confirmacion: this.fb.control('', [Validators.required]),
  },
  { validators: [contrasenasCoinciden] },   // ← validador a nivel de GRUPO
);
// El error vive en el GRUPO, no en el control: form.errors → { contrasenasDistintas: true }
// y form.controls.confirmacion.errors → null. En la plantilla se comprueba con
// form.hasError('contrasenasDistintas').

/** Una sola fuente de verdad para los textos de error de toda la aplicación. */
export const MENSAJES: Record<string, (d: any) => string> = {
  required:    () => 'Este campo es obligatorio.',
  email:       () => 'Introduce una dirección de correo válida.',
  minlength:   (d) => `Necesita al menos ${d.requiredLength} caracteres (tiene ${d.actualLength}).`,
  maxlength:   (d) => `No puede superar los ${d.requiredLength} caracteres.`,
  min:         (d) => `El valor mínimo es ${d.min}.`,
  pattern:     () => 'El formato no es válido.',
  sinEspacios: () => 'No se permiten espacios.',
  emailEnUso:  () => 'Ese correo ya está registrado.',
  servidor:    (d) => String(d),          // mensaje literal devuelto por la API
};
export function primerMensaje(errores: ValidationErrors | null): string | null {
  if (!errores) return null;
  for (const clave of Object.keys(errores)) {
    if (MENSAJES[clave]) return MENSAJES[clave](errores[clave]);
  }
  return 'Valor no válido.';   // red de seguridad: nunca dejes al usuario sin explicación
}

@Component({
  selector: 'app-errores',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `@if (mensaje(); as m) { <p class="error" [id]="idMensaje()" role="alert">{{ m }}</p> }`,
})
export class ErroresComponent {
  readonly control = input.required<AbstractControl>();
  readonly enviado = input(false);
  readonly idMensaje = input('');
  // statusChanges cubre también los validadores asíncronos
  private readonly estado = toSignal(
    toObservable(this.control).pipe(switchMap((c) => c.statusChanges.pipe(startWith(c.status)))),
  );
  readonly mensaje = computed(() => {
    this.estado();                          // dependencia explícita para recalcular
    const c = this.control();
    if (!c.invalid || (!c.touched && !this.enviado())) return null;
    return primerMensaje(c.errors);
  });
}
// Uso: <app-errores [control]="form.controls.email" [enviado]="enviado()" idMensaje="err-email" />

app.useGlobalPipes(new ValidationPipe({
  whitelist: true, forbidNonWhitelisted: true, transform: true,
  // Por defecto Nest devuelve { message: string[] }, que no dice a qué campo
  // pertenece cada mensaje. Con exceptionFactory devolvemos un mapa campo → mensajes.
  exceptionFactory: (errores: ValidationError[]) => {
    const campos: Record<string, string[]> = {};
    const recorrer = (lista: ValidationError[], prefijo = '') => {
      for (const e of lista) {
        const ruta = prefijo ? `${prefijo}.${e.property}` : e.property;
        if (e.constraints) campos[ruta] = Object.values(e.constraints);
        if (e.children?.length) recorrer(e.children, ruta);
      }
    };
    recorrer(errores);
    return new BadRequestException({
      statusCode: 400, error: 'ValidationFailed',
      message: 'Los datos enviados no son válidos',
      campos,   // { "titulo": ["titulo no puede estar vacío"], "plazo.hasta": [...] }
    });
  },
}));

/** Traslada los errores 400/422 de la API a los controles. Devuelve los
 *  mensajes que no han podido asignarse a ningún campo. */
export function aplicarErroresServidor(form: FormGroup, err: HttpErrorResponse): string[] {
  if (err.status !== 400 && err.status !== 422) {
    return ['No se ha podido guardar. Inténtalo de nuevo en unos segundos.'];
  }
  const cuerpo = err.error as { campos?: Record<string, string[]>; message?: string };
  const huerfanos: string[] = [];
  for (const [ruta, mensajes] of Object.entries(cuerpo.campos ?? {})) {
    const control = form.get(ruta);      // admite rutas: 'plazo.hasta', 'etiquetas.0'
    if (!control) { huerfanos.push(...mensajes); continue; }
    control.setErrors({ ...(control.errors ?? {}), servidor: mensajes[0] });  // fusionar
    control.markAsTouched();             // para que el mensaje se vea de inmediato
  }
  if (!cuerpo.campos && cuerpo.message) huerfanos.push(cuerpo.message);
  return huerfanos;
}

@Component({
  selector: 'app-crear-tarea',
  imports: [ReactiveFormsModule, ErroresComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './crear-tarea.component.html',
})
export class CrearTareaComponent {
  private readonly fb = inject(NonNullableFormBuilder);
  private readonly api = inject(TareasApi);
  private readonly host = inject(ElementRef<HTMLElement>);
  readonly enviando = signal(false);
  readonly enviado = signal(false);
  readonly erroresGenerales = signal<readonly string[]>([]);
  readonly form = this.fb.group({
    titulo: this.fb.control('', {
      validators: [Validators.required, Validators.maxLength(120)],
      asyncValidators: [(c) =>               // el título debe ser único en el proyecto
        timer(400).pipe(
          switchMap(() => this.api.tituloDisponible(c.value)),
          map((libre) => (libre ? null : { tituloEnUso: true })),
          catchError(() => of(null)),
          first(),
        ),
      ],
      updateOn: 'blur',        // una consulta al salir del campo, no por tecla
    }),
    descripcion: this.fb.control(''),
    prioridad: this.fb.control<'baja' | 'media' | 'alta'>('media'),
    etiquetas: this.fb.array<FormControl<string>>([]),
    plazo: this.fb.group(
      { desde: this.fb.control(''), hasta: this.fb.control('') },
      { validators: [rangoFechas('desde', 'hasta')] },
    ),
  });
  get etiquetas(): FormArray<FormControl<string>> { return this.form.controls.etiquetas; }
  readonly puedeAnadirEtiqueta = computed(() => this.etiquetas.length < 8);
  anadirEtiqueta(): void {
    if (this.etiquetas.length >= 8) return;
    this.etiquetas.push(this.fb.control('',
      [Validators.required, Validators.maxLength(24), sinEspacios()]));
  }
  quitarEtiqueta(i: number): void { this.etiquetas.removeAt(i); this.etiquetas.markAsDirty(); }
  enviar(): void {
    this.enviado.set(true);
    this.erroresGenerales.set([]);
    if (this.form.pending) return;          // aún se valida contra el servidor
    if (this.form.invalid) {
      this.form.markAllAsTouched();
      this.enfocarPrimerError();
      return;
    }
    this.enviando.set(true);
    // getRawValue: incluye los deshabilitados y devuelve el tipo completo
    this.api.crear(this.form.getRawValue()).subscribe({
      next: () => {
        this.enviando.set(false);
        this.enviado.set(false);
        this.etiquetas.clear();
        this.form.reset({ prioridad: 'media' });   // limpio Y pristine
      },
      error: (err: HttpErrorResponse) => {
        this.enviando.set(false);
        this.erroresGenerales.set(aplicarErroresServidor(this.form, err));
        this.enfocarPrimerError();
      },
    });
  }
  private enfocarPrimerError(): void {
    // queueMicrotask: los mensajes y las clases ng-invalid deben estar ya en el DOM
    queueMicrotask(() => {
      const el = this.host.nativeElement.querySelector<HTMLElement>(
        'input.ng-invalid, select.ng-invalid, textarea.ng-invalid');
      el?.focus({ preventScroll: true });
      el?.scrollIntoView({ block: 'center', behavior: 'smooth' });
    });
  }
}

<form [formGroup]="form" (ngSubmit)="enviar()" novalidate>
  @if (erroresGenerales().length) {
    <div class="callout danger" role="alert" tabindex="-1">
      <b>No se ha podido guardar</b>
      <ul>@for (e of erroresGenerales(); track e) { <li>{{ e }}</li> }</ul>
    </div>
  }
  <fieldset>
    <legend>Datos de la tarea</legend>
    <label for="titulo">Título</label>
    <input id="titulo" formControlName="titulo" required maxlength="120"
           aria-describedby="ayuda-titulo err-titulo"
           [attr.aria-invalid]="form.controls.titulo.invalid && form.controls.titulo.touched">
    <p id="ayuda-titulo" class="small muted">Debe ser único dentro del proyecto.</p>
    @if (form.controls.titulo.pending) {
      <p class="small muted" aria-live="polite">Comprobando disponibilidad…</p>
    }
    <app-errores [control]="form.controls.titulo" [enviado]="enviado()" idMensaje="err-titulo" />
    <label for="prioridad">Prioridad</label>
    <select id="prioridad" formControlName="prioridad">
      <option value="baja">Baja</option><option value="media">Media</option>
      <option value="alta">Alta</option>
    </select>
  </fieldset>
  <fieldset formGroupName="plazo">
    <legend>Plazo</legend>
    <label for="desde">Desde</label>
    <input id="desde" type="date" formControlName="desde">
    <label for="hasta">Hasta</label>
    <input id="hasta" type="date" formControlName="hasta" aria-describedby="err-plazo"
           [attr.aria-invalid]="form.controls.plazo.hasError('rangoFechas')">
    @if (form.controls.plazo.hasError('rangoFechas') && form.controls.plazo.touched) {
      <p id="err-plazo" class="error" role="alert">La fecha final debe ser posterior a la inicial.</p>
    }
  </fieldset>
  <fieldset formArrayName="etiquetas">
    <legend>Etiquetas ({{ etiquetas.length }}/8)</legend>
    @for (ctrl of etiquetas.controls; track ctrl; let i = $index) {
      <div class="fila-etiqueta">
        <label [attr.for]="'etq-' + i" class="small">Etiqueta {{ i + 1 }}</label>
        <input [id]="'etq-' + i" [formControlName]="i" placeholder="backend">
        <button type="button" (click)="quitarEtiqueta(i)"
                [attr.aria-label]="'Quitar la etiqueta ' + (i + 1)">Quitar</button>
        <app-errores [control]="ctrl" [enviado]="enviado()" />
      </div>
    } @empty {
      <p class="muted small">Sin etiquetas todavía.</p>
    }
    <button type="button" (click)="anadirEtiqueta()" [disabled]="!puedeAnadirEtiqueta()">
      Añadir etiqueta</button>
  </fieldset>
  <button type="submit" [disabled]="enviando() || form.pending">
    {{ enviando() ? 'Guardando…' : 'Crear tarea' }}</button>
</form>

@Component({
  selector: 'app-tag-input',
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    // forwardRef es obligatorio: la clase aún no está definida cuando se evalúa
    // el array de providers del decorador. multi: true, porque son tokens múltiples.
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TagInputComponent), multi: true },
    { provide: NG_VALIDATORS,     useExisting: forwardRef(() => TagInputComponent), multi: true },
  ],
  template: `
    <div class="tags" [class.disabled]="deshabilitado()">
      @for (t of etiquetas(); track t) {
        <span class="chip">{{ t }}
          <button type="button" (click)="quitar(t)" [disabled]="deshabilitado()"
                  [attr.aria-label]="'Quitar ' + t">&times;</button></span>
      }
      <input #campo [disabled]="deshabilitado()" aria-label="Añadir etiqueta"
             (keydown.enter)="anadir(campo); $event.preventDefault()" (blur)="alSalir()">
    </div>`,
})
export class TagInputComponent implements ControlValueAccessor, Validator {
  readonly etiquetas = signal<readonly string[]>([]);
  readonly deshabilitado = signal(false);
  private readonly maximo = 8;
  // Callbacks que Angular nos entrega. Se inicializan a funciones vacías para
  // que el componente funcione también fuera de un formulario.
  private alCambiar: (v: readonly string[]) => void = () => {};
  private alTocar: () => void = () => {};
  /** Modelo → vista. La llama Angular en setValue, patchValue, reset y al iniciar.
   *  NUNCA llames aquí a alCambiar(): provocarías un bucle modelo↔vista. */
  writeValue(valor: readonly string[] | null): void { this.etiquetas.set(valor ?? []); }
  registerOnChange(fn: (v: readonly string[]) => void): void { this.alCambiar = fn; }
  registerOnTouched(fn: () => void): void { this.alTocar = fn; }
  /** Opcional en la interfaz, imprescindible en la práctica: sin esto,
   *  form.disable() no tiene ningún efecto visible sobre el widget. */
  setDisabledState(d: boolean): void { this.deshabilitado.set(d); }
  /** NG_VALIDATORS: la validación propia viaja con el componente, así que
   *  quien lo use no tiene que acordarse de añadir un validador externo. */
  validate(control: AbstractControl): ValidationErrors | null {
    const v = (control.value ?? []) as readonly string[];
    if (v.length > this.maximo) return { demasiadasEtiquetas: { maximo: this.maximo, actual: v.length } };
    return new Set(v).size !== v.length ? { etiquetasDuplicadas: true } : null;
  }
  anadir(campo: HTMLInputElement): void {
    const texto = campo.value.trim().toLowerCase();
    if (!texto || this.etiquetas().includes(texto)) { campo.value = ''; return; }
    const siguiente = [...this.etiquetas(), texto];   // nueva referencia: OnPush
    this.etiquetas.set(siguiente);
    this.alCambiar(siguiente);      // ← esto es lo que actualiza el FormControl
    campo.value = '';
  }
  quitar(t: string): void {
    const siguiente = this.etiquetas().filter((x) => x !== t);
    this.etiquetas.set(siguiente);
    this.alCambiar(siguiente);
  }
  alSalir(): void { this.alTocar(); }   // sin esto, el control nunca llega a 'touched'
}

<form [formGroup]="form"><app-tag-input formControlName="etiquetas" /></form>
<app-tag-input [(ngModel)]="etiquetas" name="etiquetas" />    <!-- template-driven -->
<app-tag-input />                                             <!-- suelto, sin formulario -->

@Component({
  selector: 'app-suscripcion',
  imports: [FormsModule],          // ← FormsModule, no ReactiveFormsModule
  template: `
    <form #f="ngForm" (ngSubmit)="enviar(f)" novalidate>
      <label for="email">Correo</label>
      <input id="email" name="email" type="email"
             [(ngModel)]="modelo.email" #email="ngModel" required email>
      @if (email.invalid && (email.touched || f.submitted)) {
        <p class="error" role="alert">
          @if (email.hasError('required')) { El correo es obligatorio. }
          @if (email.hasError('email')) { El formato no es válido. }
        </p>
      }
      <!-- ngModelGroup crea un FormGroup anidado sin escribir nada en la clase -->
      <fieldset ngModelGroup="preferencias">
        <legend>Preferencias</legend>
        <label><input type="checkbox" name="novedades" [(ngModel)]="modelo.novedades"> Novedades</label>
        <label><input type="checkbox" name="ofertas" [(ngModel)]="modelo.ofertas"> Ofertas</label>
      </fieldset>
      <button type="submit">Suscribirme</button>
    </form>`,
})
export class SuscripcionComponent {
  modelo = { email: '', novedades: true, ofertas: false };
  enviar(f: NgForm): void {
    if (f.invalid) { f.control.markAllAsTouched(); return; }
    console.log(f.value);   // { email: '...', preferencias: { novedades: true, ofertas: false } }
  }
}

private enfocarPrimerInvalido(): void {
  const raiz = this.host.nativeElement as HTMLElement;
  // Solo elementos ENFOCABLES: un div con ng-invalid no sirve
  const invalido = raiz.querySelector<HTMLElement>(
    'input.ng-invalid, select.ng-invalid, textarea.ng-invalid, [tabindex].ng-invalid');
  if (!invalido) return;
  invalido.focus({ preventScroll: true });
  invalido.scrollIntoView({ block: 'center', behavior: 'smooth' });
}

<cdk-virtual-scroll-viewport itemSize="48" style="height:480px">
  <div *cdkVirtualFor="let t of tareas; trackBy: porId" class="fila">{{ t.titulo }}</div>
</cdk-virtual-scroll-viewport>
<!-- cdkVirtualFor sigue siendo una directiva estructural; no hay bloque @for
     equivalente. Se combina sin problema con @if y @defer. -->