Crear un formulario Reactivo con Validaciones

Paso 1: Importar los módulos necesarios

Primero necesitamos importar los módulos necesarios para trabajar con formularios en Angular. El módulo principal que utilizaremos es ReactiveFormsModule.

En el componente, asegúrate de importar ReactiveFormsModule desde @angular/forms:

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

/* 
  En este código estamos preparando el componente para manejar formularios.
  ReactiveFormsModule nos permitirá crear y manejar formularios reactivos.
  FormBuilder será utilizado para simplificar la creación del formulario
  y Validators nos ayudarán a validar los campos.
 */
@Component({
  selector: 'app-formulario',
  standalone: true,
  imports: [NgIf,ReactiveFormsModule],  // Importamos ReactiveFormsModule
  templateUrl: './formulario.component.html',
  styleUrls: ['./formulario.component.css']
})
export class FormularioComponent {
  // Aquí definiremos el formulario más adelante
}
      

Paso 2: Crear y validar el formulario

En este paso, vamos a crear el formulario usando FormBuilder. Además, aplicaremos validaciones a los campos:

• Nombre: Debe ser obligatorio (Validators.required).
• Email: Debe ser obligatorio y tener un formato válido (Validators.email).
• Contraseña: Obligatoria y debe tener al menos 6 caracteres (Validators.minLength(6)).

export class FormularioComponent {
  // Definimos el grupo de formulario
  miFormulario: FormGroup;

  /* 
    Usamos FormBuilder para construir el formulario.
    Cada campo tiene sus respectivas validaciones.
  */
  constructor(private fb: FormBuilder) {
    this.miFormulario = this.fb.group({
      nombre: ['', Validators.required],  // El campo "nombre" es obligatorio.
      email: ['', [Validators.required, Validators.email]],  // El campo "email" es obligatorio y debe tener formato de email válido.
      password: ['', [Validators.required, Validators.minLength(6)]]  // La "contraseña" es obligatoria y debe tener al menos 6 caracteres.
    });
  }

  // Método para imprimir los datos del formulario en consola al enviar el formulario
  grabar(): void {
    console.log(this.miFormulario.value);
  }

  /* 
    Métodos para verificar si un campo es inválido y ha sido tocado por el usuario.
    Esto nos permitirá mostrar mensajes de error en el template cuando sea necesario.
  */
  get nombreInvalido() {
    return this.miFormulario.get('nombre')?.invalid && this.miFormulario.get('nombre')?.touched;
  }

  get emailInvalido() {
    return this.miFormulario.get('email')?.invalid && this.miFormulario.get('email')?.touched;
  }

  get passwordInvalido() {
    return this.miFormulario.get('password')?.invalid && this.miFormulario.get('password')?.touched;
  }
}
      

Paso 3: Crear el template con validaciones

En el archivo formulario.component.html, vamos a crear el formulario con los campos correspondientes. Además, incluiremos mensajes de error que aparecerán si el usuario no completa los campos correctamente.

<form [formGroup]="miFormulario" (ngSubmit)="grabar()">
  <!-- Campo "Nombre" con validación obligatoria -->
  <label for="nombre">Nombre:</label>
  <input id="nombre" formControlName="nombre" type="text">
  <div class="error-message" *ngIf="nombreInvalido">
    El nombre es obligatorio.
  </div>

  <!-- Campo "Email" con validación obligatoria y formato de email -->
  <label for="email">Email:</label>
  <input id="email" formControlName="email" type="email">
  <div class="error-message" *ngIf="emailInvalido">
    Introduce un email válido.
  </div>

  <!-- Campo "Contraseña" con validación de mínimo 6 caracteres -->
  <label for="password">Contraseña:</label>
  <input id="password" formControlName="password" type="password">
  <div class="error-message" *ngIf="passwordInvalido">
    La contraseña debe tener al menos 6 caracteres.
  </div>

  <!-- Botón de envío deshabilitado si el formulario es inválido -->
  <button type="submit" [disabled]="miFormulario.invalid">Enviar</button>
</form>
      

Explicación: En este template, cada campo está vinculado a su respectivo FormControl. Los mensajes de error se muestran si el campo es inválido y ha sido tocado por el usuario.

Paso 4: Probar el formulario

Después de crear el formulario y agregar las validaciones, puedes probarlo en el navegador. Asegúrate de que el servidor de Angular esté en ejecución usando el siguiente comando:

ng serve

Luego, abre tu navegador y visita http://localhost:4200/ para ver el formulario con las validaciones funcionando.

Explicación de cómo funciona

• ReactiveFormsModule nos permite gestionar formularios reactivos, lo que significa que podemos tener más control sobre los datos y validaciones en tiempo real.
• Los validadores aseguran que los datos ingresados sean correctos antes de enviarse. Por ejemplo, el email debe tener un formato válido y la contraseña debe tener un mínimo de 6 caracteres.
• Usamos las propiedades touched e invalid para mostrar mensajes de error solo si el usuario ha interactuado con el campo, mejorando así la experiencia del usuario.
• El botón de envío se desactiva si el formulario tiene algún error, lo que garantiza que solo se envíen datos válidos.

Explicación de las validaciones

Las validaciones aplicadas en este formulario son esenciales para garantizar la integridad de los datos ingresados por los usuarios:

• Validators.required: Asegura que el campo no puede estar vacío. Se aplica en el nombre, email y contraseña.
• Validators.email: Verifica que el formato del email sea válido, garantizando que el valor ingresado sea una dirección de correo electrónico correcta.
• Validators.minLength(6): Establece un mínimo de 6 caracteres para la contraseña, asegurando que sea segura.

Además, las propiedades .touched e .invalid permiten que los mensajes de error se muestren solo cuando el usuario ha interactuado con el campo, lo que mejora la usabilidad.