Angular: Formularios

En Angular 18, los formularios son una herramienta esencial para la interacción con los usuarios. Esta guía aborda cómo trabajar con formularios en Angular 18, incluyendo ejemplos prácticos y las mejores prácticas.

Tipos de formularios en Angular 18

Angular 18 ofrece dos enfoques principales para manejar formularios: formularios reactivos y formularios basados en plantillas. Ambos tienen sus ventajas y desventajas, y la elección entre uno u otro dependerá de las necesidades específicas del proyecto.

Formularios reactivos

Los formularios reactivos proporcionan un enfoque más programático y estructurado. Utilizan FormGroup, FormControl y FormArray para gestionar el estado del formulario.

Ejemplo básico de formulario reactivo

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

@Component({
selector: 'app-reactive-form',
template: `
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<label for="firstName">Nombre:</label>
<input id="firstName" formControlName="firstName">

<label for="lastName">Apellido:</label>
<input id="lastName" formControlName="lastName">

<button type="submit">Enviar</button>
</form>
`
})
export class ReactiveFormComponent {
profileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl('')
});

onSubmit() {
console.log(this.profileForm.value);
}
}

Formularios basados en plantillas

Los formularios basados en plantillas son más declarativos y se definen directamente en el HTML. Utilizan la directiva ngModel para enlazar el modelo de datos con el formulario.

Ejemplo básico de formulario basado en plantillas

import { Component } from '@angular/core';

@Component({
selector: 'app-template-form',
template: `
<form #profileForm="ngForm" (ngSubmit)="onSubmit(profileForm)">
<label for="firstName">Nombre:</label>
<input id="firstName" name="firstName" ngModel>

<label for="lastName">Apellido:</label>
<input id="lastName" name="lastName" ngModel>

<button type="submit">Enviar</button>
</form>
`
})
export class TemplateFormComponent {
onSubmit(form: any) {
console.log(form.value);
}
}

Validación de formularios en Angular 18

Angular 18 permite añadir validaciones tanto en formularios reactivos como basados en plantillas. Las validaciones pueden ser síncronas o asíncronas.

Validaciones en formularios reactivos

import { FormControl, Validators } from '@angular/forms';

profileForm = new FormGroup({
firstName: new FormControl('', [Validators.required, Validators.minLength(2)]),
lastName: new FormControl('', [Validators.required, Validators.minLength(2)])
});

Validaciones en formularios basados en plantillas

<input id="firstName" name="firstName" ngModel required minlength="2">
<div *ngIf="profileForm.controls['firstName'].invalid && profileForm.controls['firstName'].touched">
El nombre es obligatorio y debe tener al menos 2 caracteres.
</div>

Manejo de errores en formularios

Para mejorar la experiencia del usuario, es fundamental gestionar y mostrar los errores de validación de manera eficiente.

Ejemplo de manejo de errores

<div *ngIf="profileForm.controls['firstName'].invalid && profileForm.controls['firstName'].touched">
<div *ngIf="profileForm.controls['firstName'].errors.required">El nombre es obligatorio.</div>
<div *ngIf="profileForm.controls['firstName'].errors.minlength">El nombre debe tener al menos 2 caracteres.</div>
</div>