Introducción
Los formularios basados en plantillas en Angular permiten crear y gestionar formularios utilizando directivas y plantillas HTML. Este enfoque es ideal para formularios simples y medianos, donde la lógica del formulario se puede manejar principalmente en la plantilla.
Conceptos Clave
- Directiva
ngModel: Vincula los datos del formulario con el modelo de datos en el componente. - Directiva
ngForm: Proporciona un contenedor para el formulario y gestiona su estado. - Validaciones: Uso de atributos HTML y directivas de Angular para validar los campos del formulario.
- Manejo de Errores: Mostrar mensajes de error basados en el estado de validación de los campos.
Configuración Inicial
Paso 1: Crear un Componente
Primero, crea un nuevo componente para el formulario:
Paso 2: Importar FormsModule
Asegúrate de importar FormsModule en el módulo correspondiente (app.module.ts):
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
// otros componentes
TemplateDrivenFormComponent
],
imports: [
// otros módulos
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Creación del Formulario
Paso 3: Definir el Modelo de Datos
En el componente, define el modelo de datos que representará el formulario:
import { Component } from '@angular/core';
@Component({
selector: 'app-template-driven-form',
templateUrl: './template-driven-form.component.html',
styleUrls: ['./template-driven-form.component.css']
})
export class TemplateDrivenFormComponent {
user = {
name: '',
email: '',
password: ''
};
onSubmit() {
console.log('Formulario enviado', this.user);
}
}Paso 4: Crear la Plantilla del Formulario
En el archivo de plantilla (template-driven-form.component.html), crea el formulario utilizando las directivas ngForm y ngModel:
<form #userForm="ngForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" [(ngModel)]="user.name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" [(ngModel)]="user.email" required email>
</div>
<div>
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" [(ngModel)]="user.password" required minlength="6">
</div>
<button type="submit" [disabled]="userForm.invalid">Enviar</button>
</form>Paso 5: Validaciones y Manejo de Errores
Añade validaciones y muestra mensajes de error en la plantilla:
<form #userForm="ngForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name" [(ngModel)]="user.name" required>
<div *ngIf="userForm.submitted && userForm.controls.name?.invalid">
<small *ngIf="userForm.controls.name?.errors?.required">El nombre es obligatorio.</small>
</div>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" [(ngModel)]="user.email" required email>
<div *ngIf="userForm.submitted && userForm.controls.email?.invalid">
<small *ngIf="userForm.controls.email?.errors?.required">El email es obligatorio.</small>
<small *ngIf="userForm.controls.email?.errors?.email">El email no es válido.</small>
</div>
</div>
<div>
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password" [(ngModel)]="user.password" required minlength="6">
<div *ngIf="userForm.submitted && userForm.controls.password?.invalid">
<small *ngIf="userForm.controls.password?.errors?.required">La contraseña es obligatoria.</small>
<small *ngIf="userForm.controls.password?.errors?.minlength">La contraseña debe tener al menos 6 caracteres.</small>
</div>
</div>
<button type="submit" [disabled]="userForm.invalid">Enviar</button>
</form>Ejercicio Práctico
Ejercicio 1: Añadir un Campo de Confirmación de Contraseña
- Añade un campo de confirmación de contraseña al formulario.
- Asegúrate de que la contraseña y la confirmación de la contraseña coincidan.
- Muestra un mensaje de error si las contraseñas no coinciden.
Solución
Paso 1: Actualizar el Modelo de Datos
Paso 2: Actualizar la Plantilla del Formulario
<form #userForm="ngForm" (ngSubmit)="onSubmit()">
<!-- Otros campos -->
<div>
<label for="confirmPassword">Confirmar Contraseña:</label>
<input type="password" id="confirmPassword" name="confirmPassword" [(ngModel)]="user.confirmPassword" required>
<div *ngIf="userForm.submitted && userForm.controls.confirmPassword?.invalid">
<small *ngIf="userForm.controls.confirmPassword?.errors?.required">La confirmación de la contraseña es obligatoria.</small>
<small *ngIf="user.password !== user.confirmPassword">Las contraseñas no coinciden.</small>
</div>
</div>
<button type="submit" [disabled]="userForm.invalid || user.password !== user.confirmPassword">Enviar</button>
</form>Conclusión
En esta sección, hemos aprendido a crear formularios basados en plantillas en Angular, utilizando directivas como ngModel y ngForm. También hemos visto cómo añadir validaciones y manejar errores en la plantilla. Los formularios basados en plantillas son una forma poderosa y sencilla de gestionar formularios en Angular, especialmente para aplicaciones pequeñas y medianas.
En el próximo tema, exploraremos los formularios reactivos, que ofrecen un mayor control y flexibilidad para formularios más complejos.
Curso de Angular 2+
Módulo 1: Introducción a Angular
- ¿Qué es Angular?
- Configuración del Entorno de Desarrollo
- Tu Primera Aplicación Angular
- Arquitectura de Angular
Módulo 2: Conceptos Básicos de TypeScript
- Introducción a TypeScript
- Variables y Tipos de Datos en TypeScript
- Funciones y Funciones Flecha
- Clases e Interfaces
Módulo 3: Componentes y Plantillas
- Creación de Componentes
- Plantillas de Componentes
- Estilos de Componentes
- Interacción entre Componentes
Módulo 4: Directivas y Pipes
Módulo 5: Servicios e Inyección de Dependencias
- Introducción a los Servicios
- Creación y Uso de Servicios
- Inyección de Dependencias
- Inyectores Jerárquicos
Módulo 6: Enrutamiento y Navegación
Módulo 7: Formularios en Angular
- Formularios Basados en Plantillas
- Formularios Reactivos
- Validación de Formularios
- Formularios Dinámicos
Módulo 8: Cliente HTTP y Observables
- Introducción al Cliente HTTP
- Realizando Solicitudes HTTP
- Manejo de Respuestas HTTP
- Uso de Observables
Módulo 9: Gestión de Estado
- Introducción a la Gestión de Estado
- Uso de Servicios para la Gestión de Estado
- NgRx Store
- NgRx Effects