El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

La validación de formularios es una parte crucial en el desarrollo de aplicaciones web, ya que asegura que los datos ingresados por los usuarios cumplan con ciertos criterios antes de ser procesados. Angular proporciona herramientas poderosas para manejar la validación tanto en formularios basados en plantillas como en formularios reactivos.

Tipos de Validación

Validación Incorporada: Angular ofrece validadores incorporados como required, minlength, maxlength, pattern, etc.
Validación Personalizada: Puedes crear tus propios validadores para casos específicos.

Validación en Formularios Basados en Plantillas

Ejemplo Práctico

Vamos a crear un formulario simple que valide el nombre de usuario y el correo electrónico.

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div>
    <label for="username">Nombre de Usuario:</label>
    <input type="text" id="username" name="username" ngModel required minlength="3">
    <div *ngIf="userForm.submitted || userForm.controls.username?.touched">
      <div *ngIf="userForm.controls.username?.errors?.required">El nombre de usuario es obligatorio.</div>
      <div *ngIf="userForm.controls.username?.errors?.minlength">El nombre de usuario debe tener al menos 3 caracteres.</div>
    </div>
  </div>

  <div>
    <label for="email">Correo Electrónico:</label>
    <input type="email" id="email" name="email" ngModel required email>
    <div *ngIf="userForm.submitted || userForm.controls.email?.touched">
      <div *ngIf="userForm.controls.email?.errors?.required">El correo electrónico es obligatorio.</div>
      <div *ngIf="userForm.controls.email?.errors?.email">El correo electrónico no es válido.</div>
    </div>
  </div>

  <button type="submit">Enviar</button>
</form>

Explicación

ngModel: Vincula el campo del formulario con el modelo de datos.
required, minlength, email: Validadores incorporados.
*ngIf: Muestra mensajes de error basados en el estado del formulario y los controles.

Ejercicio

Crea un formulario que valide un campo de contraseña con las siguientes reglas:

Obligatorio.
Mínimo 8 caracteres.
Debe contener al menos una letra mayúscula y un número.

Validación en Formularios Reactivos

Ejemplo Práctico

Primero, configura el formulario en el componente TypeScript:

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

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log('Formulario enviado', this.userForm.value);
    } else {
      console.log('Formulario no válido');
    }
  }
}

Luego, crea la plantilla HTML:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="username">Nombre de Usuario:</label>
    <input id="username" formControlName="username">
    <div *ngIf="userForm.controls.username.touched && userForm.controls.username.invalid">
      <div *ngIf="userForm.controls.username.errors?.required">El nombre de usuario es obligatorio.</div>
      <div *ngIf="userForm.controls.username.errors?.minlength">El nombre de usuario debe tener al menos 3 caracteres.</div>
    </div>
  </div>

  <div>
    <label for="email">Correo Electrónico:</label>
    <input id="email" formControlName="email">
    <div *ngIf="userForm.controls.email.touched && userForm.controls.email.invalid">
      <div *ngIf="userForm.controls.email.errors?.required">El correo electrónico es obligatorio.</div>
      <div *ngIf="userForm.controls.email.errors?.email">El correo electrónico no es válido.</div>
    </div>
  </div>

  <button type="submit">Enviar</button>
</form>

Explicación

FormBuilder: Servicio para crear instancias de FormGroup y FormControl.
formControlName: Vincula el control del formulario con el modelo de datos.
Validators: Proporciona validadores incorporados.

Ejercicio

Crea un formulario reactivo que valide un campo de contraseña con las siguientes reglas:

Obligatorio.
Mínimo 8 caracteres.
Debe contener al menos una letra mayúscula y un número.

Validación Personalizada

Ejemplo Práctico

Vamos a crear un validador personalizado para verificar que una contraseña contenga al menos una letra mayúscula y un número.

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function passwordValidator(control: AbstractControl): ValidationErrors | null {
  const value = control.value;
  if (!value) {
    return null;
  }

  const hasUpperCase = /[A-Z]+/.test(value);
  const hasNumber = /[0-9]+/.test(value);

  const valid = hasUpperCase && hasNumber;
  return !valid ? { passwordStrength: true } : null;
}

Uso del Validador Personalizado

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { passwordValidator } from './password-validator';

@Component({
  selector: 'app-password-form',
  templateUrl: './password-form.component.html'
})
export class PasswordFormComponent {
  passwordForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.passwordForm = this.fb.group({
      password: ['', [Validators.required, Validators.minLength(8), passwordValidator]]
    });
  }

  onSubmit() {
    if (this.passwordForm.valid) {
      console.log('Formulario enviado', this.passwordForm.value);
    } else {
      console.log('Formulario no válido');
    }
  }
}

Plantilla HTML

<form [formGroup]="passwordForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="password">Contraseña:</label>
    <input id="password" formControlName="password">
    <div *ngIf="passwordForm.controls.password.touched && passwordForm.controls.password.invalid">
      <div *ngIf="passwordForm.controls.password.errors?.required">La contraseña es obligatoria.</div>
      <div *ngIf="passwordForm.controls.password.errors?.minlength">La contraseña debe tener al menos 8 caracteres.</div>
      <div *ngIf="passwordForm.controls.password.errors?.passwordStrength">La contraseña debe contener al menos una letra mayúscula y un número.</div>
    </div>
  </div>

  <button type="submit">Enviar</button>
</form>

Conclusión

La validación de formularios en Angular es una herramienta poderosa que asegura la integridad de los datos ingresados por los usuarios. Ya sea utilizando validadores incorporados o creando validadores personalizados, Angular facilita la implementación de reglas de validación complejas. En el siguiente tema, exploraremos cómo crear formularios dinámicos que se adapten a las necesidades del usuario en tiempo real.

Validación de Formularios

Tipos de Validación

Validación en Formularios Basados en Plantillas

Ejemplo Práctico

Explicación

Ejercicio

Validación en Formularios Reactivos

Ejemplo Práctico

Explicación

Ejercicio

Validación Personalizada

Ejemplo Práctico

Uso del Validador Personalizado

Plantilla HTML

Conclusión

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

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

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas