Cómo validar utilizando Regex con Reactive Forms en Angular
Reactive Forms es una de las dos estrategias principales de Angular para construir formularios dinámicos y escalables. A diferencia de los Template-Driven Forms, Reactive Forms proporciona una estructura basada en programación reactiva, permitiendo mayor control y personalización de las validaciones.
Implementación de validaciones con Regex
1. Configura el módulo de formularios reactivos
Asegúrate de importar ReactiveFormsModule en el módulo donde utilizarás los formularios:
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [ReactiveFormsModule],
})
export class AppModule {}2. Crea el formulario reactivo
Define un FormGroup en tu componente:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
})
export class FormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
email: ['', [Validators.required, Validators.pattern(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/)]],
});
}
}
En este ejemplo, el campo email utiliza un patrón Regex para validar direcciones de correo electrónico.
3. Agrega los mensajes de error
Muestra mensajes personalizados según los errores detectados:
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label for="email">Correo electrónico:</label>
<input id="email" formControlName="email" type="text" />
<div *ngIf="myForm.get('email')?.invalid && myForm.get('email')?.touched">
<small *ngIf="myForm.get('email')?.errors?.['required']">El correo es obligatorio.</small>
<small *ngIf="myForm.get('email')?.errors?.['pattern']">El formato no es válido.</small>
</div>
<button type="submit" [disabled]="myForm.invalid">Enviar</button>
</form>4. Procesa el formulario
Gestiona la lógica al enviar los datos:
onSubmit() {
if (this.myForm.valid) {
console.log('Formulario válido:', this.myForm.value);
} else {
console.log('Formulario inválido');
}
}Ejemplos comunes de validación con Regex
- Contraseñas seguras:
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/Valida al menos 8 caracteres, una letra y un número.
- Números de teléfono:
/^[0-9]{10}$/Verifica que tenga 10 dígitos.
- Nombres alfabéticos:
/^[a-zA-Z\s]+$/Acepta solo letras y espacios.
Referencia oficial
Consulta la documentación oficial de Angular para más detalles sobre Reactive Forms y validaciones personalizadas.
Jorge García
Fullstack developer