Validaciones en Formularios con Angular
La forma más común de capturar información de los usuarios a través de Formularios y depende de una buena UI/UX ganar o perder un usuarios en nuestra aplicación
Es de vital importancia hacer un buen manejo de los formularios y tener las validaciones adecuadas, por esto Angular nos ofrece FormBuilder, una clase que nos provee una completa herramienta para controlar y validar formularios de forma muy eficiente, potente y sencilla.
En Angular existen tres maneras de trabajar con formularios:
Forms con NgModel
Es mucho más simple de trabajar y es muy familiar a AngularJS 1, pero hay menos control y es más complejo hacer pruebas unitarias usando NgModel.
Forms con Templates
De esta manera la lógica está casi toda dentro del template, esto lo hace pueda complejo de mantener y hacer pruebas unitarias además que el template se puede ver desordenado.
Forms con FormBuilder
Con FormBuilder se deja toda la lógica del lado del controlador (esto es muy útil), es mucho más ordenado, fácil para hacer pruebas unitarias y fácil de mantener.
Para crear nuestro formulario con FormBuilder, vamos a ver la siguiente estructura básica:
La clase completa de home.component.ts se vería de la siguiente forma:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class FormComponent implements OnInit {
myForm: FormGroup;
constructor(
public fb: FormBuilder
) {
this.myForm = this.fb.group({
name: ['', [Validators.required]],
company: ['', [Validators.required]],
email: ['', [Validators.required]],
age: ['', [Validators.required]],
url: ['', [Validators.required]],
password: ['', [Validators.required]],
});
} ngOnInit() { } saveData(){
console.log(this.myForm.value);
}
}
Primero declaramos las utilidades que vamos a usar de @angular/forms y se inyecta a FormBuilder como dependencia.
Con el método saveData obtenemos la información del formulario luego que todo sea validado.
Observamos que todos los campos tienen una validación la cual es Validators.required, es decir que todos los campos son obligatorios. Con Angular y FormBuilder podemos agregar validaciones tan complejas como queramos, existen dos tipos de validaciones.
Validaciones asíncronas
Las validaciones asíncronas son aquellas en las cuales debemos hacer una solicitud externa y de acuerdo a ello validar los datos, como por ejemplo para validar un nombre de usuario (usersname), primero debemos hacer una solicitud a nuestra base de datos y comprobar que el nombre de usuario está disponible, esto es una validación asíncrona.
Validaciones sincrónicas
La validación sincrónica es aquella que no necesitamos de consultar ninguna fuente externa para comprobar los datos, como por ejemplo validar que el email tiene el formato correcto ó validar que el usuario sea un adulto a partir de la edad ó validar un número mínimo de caracteres etc.
Teniendo esto en cuenta podemos hacer combinaciones muy útiles de validaciones respetando la siguiente forma:
Primero se declara un valor por defecto, luego declaramos el conjunto de la validaciones sincrónicas y luego el conjunto de validaciones asíncronas. En este artículo trabajaremos con validaciones sincrónicas.
Angular, son provee la clase Validators que trae funciones comunes, que son de mucha utilidad en los formularios:
- Validators.required = Comprueba que el campo sea llenado.
- Validators.minLength = Comprueba que el campo cumpla con un mínimo de caracteres.
- Validators.maxLength = Comprueba que el campo cumpla con un máximo de caracteres.
- Validators.pattern = Comprueba que el campo cumpla con un patrón usando una expresión regular.
- Validators.email = Comprueba que el campo cumpla con un patrón de correo válido.
Con estas funciones podemos crear conjuntos de validaciones, por ejemplo al campo company podemos agregar el siguiente conjunto de validaciones:
Esto hará que el campo company deba cumplir con todas las validaciones que fueron declaradas.
También podemos crear nuestras propias validaciones, pero esto lo veremos en los próximos artículos.
Ahora nos enfocaremos en el template y mostrar los errores de cada campo al usuario, como ejemplo tomaremos en cuenta nuestro campo company que debe cumplir con varias validaciones al mismo tiempo.
Como podemos ver, se hace uso del elemento myForm dentro del formulario en el template y así podemos obtener el estado actual del campo, haciendo uso de myForm.get('field').hasError(‘typeError') podremos saber cuál mensaje mostrar al usuario dependiendo del error que tenga el campo.
Recuerden que si tienen alguna duda pueden contactarme a través de mi Twitter @nicobytes.
Si te gustó la publicación, compártela y deja algunos claps 👏
