Scroll Infinito con Angular 6 y Firestore
Scroll Infinito con Angular 6 y Firestore
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


Vamos a ver 2 formas de Validar formularios con expresiones regulares en Angular 5 para poder tener más opciones a la hora de validar nuestros formularios.

En el primer ejemplo crearemos un validador personalizado el cual será una función que devolverá un ValidatorFn, lo que haremos será comprobar una expresión regular y devolver un identificador para poder mostrar el error de esta validación en caso de que exista.

En el segundo, haremos lo mismo, pero en lugar de crear un validador personalizado haremos uso del método pattern de la clase Validators, que nos sirve justamente para realizar validaciones con expresiones regulares en Angular.

Validaciones personalizadas en Angular 5

Para el primer ejemplo vamos a crear un archivo llamado phone.validator.ts y añadimos el siguiente código.

Con el código anterior simplemente exportamos una función que podemos utilizar en las validaciones de Angular, para ello debemos devolver un ValidatorFn, cómo puedes ver con la función test comprobamos si la expresión regular es correcta o no, si no lo es, podremos saberlo gracias al string phoneNumber como vamos a ver, pero antes vamos a utilizar nuestro validador en un componente.

Cómo puedes ver, simplemente le pasamos a Validators.compose nuestra función y una expresión regular como parámetro, sólo por hacer eso nuestro campo phone del formulario podrá ejecutar esta expresión regular, para ello vamos a escribir el siguiente html.

Con la línea *ngIf=”loginForm.get(‘phone’).errors[‘phoneNumber’]” podemos saber si el campo phone ha pasado la validación, si no es así simplemente mostramos un mensaje de error.

Validators.pattern en Angular 5

Un poco más abajo verás la línea *ngIf=”loginForm.get(‘phone’).errors[‘pattern’]”, la cual hace la mismo que nuestra validación, pero utilizando Validators.pattern, que acepta y ejecuta una expresión regular, para ver su funcionamiento, vamos a cambiar Validators.compose por lo siguiente.

Si ahora vuelves a ejecutar de nuevo el formulario verás que funciona exactamente igual que antes, por lo tanto ya tenemos varias formas de hacer lo mismo, pero con la primera podremos conseguir cosas más personalizadas que utilizando pattern.