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
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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>
Completa Angular y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs