El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

Los formularios basados en plantillas en Angular son una forma declarativa de crear y gestionar formularios. Utilizan directivas de Angular en el HTML para crear y validar formularios de manera sencilla y eficiente. Este enfoque es ideal para formularios simples y medianos.

Objetivos

Comprender la diferencia entre formularios basados en plantillas y formularios reactivos.
Aprender a crear formularios utilizando directivas de Angular.
Implementar validaciones básicas en formularios basados en plantillas.
Manejar el envío de formularios y la captura de datos.

Conceptos Clave

Directivas de Angular: Utilizadas para enlazar el formulario HTML con el modelo de datos.
NgModel: Directiva que permite el enlace bidireccional de datos.
ngForm: Directiva que agrupa todos los controles de formulario.
Validaciones: Reglas aplicadas a los campos del formulario para asegurar la entrada de datos correcta.

Creación de un Formulario Basado en Plantillas

Paso 1: Configuración del Módulo

Primero, asegúrate de que FormsModule esté importado en tu módulo principal o en el módulo donde deseas utilizar formularios basados en plantillas.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Paso 2: Creación del Formulario en el Componente

En el archivo de plantilla HTML de tu componente, crea un formulario utilizando las directivas de Angular.

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name" ngModel required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" ngModel required email>
  </div>
  <button type="submit" [disabled]="userForm.invalid">Enviar</button>
</form>

Paso 3: Manejo de Datos en el Componente

En el archivo TypeScript del componente, define el método onSubmit para manejar el envío del formulario.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onSubmit(form: any): void {
    console.log('Formulario enviado:', form.value);
  }
}

Validaciones en Formularios Basados en Plantillas

Validaciones Básicas

Angular proporciona varias directivas para validaciones básicas como required, minlength, maxlength, pattern, etc.

<div>
  <label for="password">Contraseña:</label>
  <input type="password" id="password" name="password" ngModel required minlength="8">
  <div *ngIf="userForm.controls['password']?.invalid && userForm.controls['password']?.touched">
    <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 8 caracteres.</small>
  </div>
</div>

Validaciones Personalizadas

Puedes crear validaciones personalizadas utilizando directivas.

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[appCustomValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true }]
})
export class CustomValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const isValid = /* lógica de validación */;
    return isValid ? null : { customError: true };
  }
}

Ejercicio Práctico

Ejercicio

Crea un formulario de registro con los siguientes campos:

Nombre (obligatorio)
Email (obligatorio y debe ser un email válido)
Contraseña (obligatoria y debe tener al menos 8 caracteres)
Confirmar Contraseña (debe coincidir con la contraseña)

Solución

<form #registerForm="ngForm" (ngSubmit)="onSubmit(registerForm)">
  <div>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name" ngModel required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" ngModel required email>
  </div>
  <div>
    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password" ngModel required minlength="8">
  </div>
  <div>
    <label for="confirmPassword">Confirmar Contraseña:</label>
    <input type="password" id="confirmPassword" name="confirmPassword" ngModel required [validateEqual]="password">
  </div>
  <button type="submit" [disabled]="registerForm.invalid">Registrar</button>
</form>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onSubmit(form: any): void {
    console.log('Formulario de registro enviado:', form.value);
  }
}

Conclusión

En esta sección, hemos aprendido a crear formularios basados en plantillas en Angular, a implementar validaciones básicas y personalizadas, y a manejar el envío de formularios. Los formularios basados en plantillas son una herramienta poderosa y fácil de usar para gestionar formularios en aplicaciones Angular. En la próxima sección, exploraremos los formularios reactivos, que ofrecen un enfoque más programático y flexible para la gestión de formularios.

Formularios Basados en Plantillas

Introducción

Objetivos

Conceptos Clave

Creación de un Formulario Basado en Plantillas

Paso 1: Configuración del Módulo

Paso 2: Creación del Formulario en el Componente

Paso 3: Manejo de Datos en el Componente

Validaciones en Formularios Basados en Plantillas

Validaciones Básicas

Validaciones Personalizadas

Ejercicio Práctico

Ejercicio

Solución

Conclusión

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas