Los formularios son componentes esenciales en aplicaciones web. Angular ofrece soporte integrado para enlace bidireccional de datos, validación y gestión de estado. Exploraremos técnicas para capturar entradas de usuario.

Obtención de Datos de Formulario

Consideremos este formulario básico:

<div class="container">
  <h2>Formulario de Acceso</h2>
  <form class="access-form">
    <div class="input-group">
      <input class="input-control" type="text" id="user-id" placeholder="Usuario">
    </div>
    <div class="input-group">
      <input class="input-control" type="password" id="pass-code" placeholder="Contraseña">
    </div>
    <div class="input-group">
      <button type="submit" class="submit-btn">Ingresar</button>
    </div>
  </form>
</div>

Método 1: Evento $event

Capturar el evento completo:

<form class="access-form" (submit)="handleSubmit($event)">

handleSubmit(event: any) {
  console.log(event.target);
}

Inconveniente: Transfiere información excesiva innecesaria.

Método 2: Variables de Referencia

Referenciar elementos directamente:

<form #accessForm="ngForm" (submit)="handleSubmit(accessForm)">
  <input #userRef type="text">
</form>

Limitación: Requiere activación por evento y posibles conflictos de nombres.

Implementación de Formularios Dirigidos por Plantillas

Requerimiento inicial:

import { FormsModule } from '@angular/forms';

Características clave:

• Uso de [(ngModel)] para enlace bidireccional
• Atributo name obligatorio para controles
• ngForm para validación global
• ngModel para estados individuales
• Validadores HTML nativos (required, pattern)

Ejemplo Práctico

<form #accessForm="ngForm" (submit)="submitForm()">
  <div class="input-group">
    <input class="input-control" 
           name="username"
           [(ngModel)]="credential.user"
           required
           pattern="[a-zA-Z0-9]+"
           #userInput="ngModel">
  </div>
  
  <div *ngIf="userInput.touched && userInput.invalid">
    <span *ngIf="userInput.errors?.['required']">Requerido</span>
    <span *ngIf="userInput.errors?.['pattern']">Solo caracteres alfanuméricos</span>
  </div>

  <div class="input-group">
    <input class="input-control" 
           type="password"
           name="password"
           [(ngModel)]="credential.pass"
           required
           #passInput="ngModel">
  </div>

  <button type="submit" [disabled]="accessForm.invalid">Ingresar</button>
</form>

Estilizado por Estado

input.ng-invalid.ng-touched {
  border: 2px solid #e74c3c;
}

Beneficios: Validación automática, gestión de estados, y retroalimentación visual integrada.