Formularios

Angular
Angular
Actualizado: 14/02/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

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.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

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

⭐⭐⭐⭐⭐
4.9/5 valoración