Bienvenidos en esta clase, vamos a ver cómo validar nuestro formulario.
Hay dos formas una por el lado cliente a través de Angular, con el API, el editor de Angular.
Otra forma es en el Piquet.
Validamos en el Wacken y retornamos todos los mensajes de error al cliente en Angular y mostramos los
mensajes.
Vamos a comenzar primero con la forma de Angular.
Nos vamos a ir a la plantilla del formulario en clientes y form.
Component.
HTML.
En realidad es bastante sencillo.
Por cada input tenemos que agregar cuáles son nuestros valedores a través de atributos.
Por ejemplo, tenemos el validador recayera para indicar que requerido el validador min y max length
para determinar cuál es el largo, mínimo o máximo en caracteres o algún tipo de patrón con expresión
regular.
En fin, hay diferentes baleados también para validar email.
Vamos a partir con recayÃ, simplemente se agrega y vamos a repetir lo mismo para el apellido y también
para L.M.
Pero además de requerido, el nombre va a tener como mínimo 4 caracteres de largo.
Entonces para eso utilizamos el validador min length igual 4.
El tema que ahora tenemos que mostrar los mensajes de error que por ejemplo cada vez que escribimos
estamos escribiendo y no cumple con el validador.
Si tiene 3 caracteres y no 4, debería mostrar el mensaje de error justo debajo de limp o si dejamos
la casilla vacía sin ningún texto, sin ningún valor.
Bueno, para poder mostrar mostrarlo mensaje de error, tenemos que utilizar el endif a través de un
elemento, un TIFF, un contenedor.
No le mostramos los textos con algún estilo.
debutarÃ.
Alert.
Por ejemplo, alert danger, que se refiere a mensaje de error.
Vamos a partir con un contenedor con un div y anidado.
Vamos a tener otro div.
Este es el principal que va a preguntar si existen errores.
Si el campo name, por ejemplo, tiene algún tipo de error y luego vamos a tener un contenedor un div
por cada validador para que muestre el mensaje.
Por ejemplo, recoger el campo requerido o Milenka, el nombre tiene que tener mínimo 4 caracteres.
Cuántos valedores?
Partamos primero por el principal.
Acá vamos a tener el estilo el alert alert danger bien.
Y acá con un gif preguntamos.
Pero para poder preguntar tenemos que tener el objeto que contenga los mensajes de error.
El objeto que está relacionado al nombre.
Para eso tenemos que asignar a una variable local que vamos a llamar, por ejemplo, nombre.
Podemos utilizar el mismo nombre que el campo y usamos gatos para definir esta variable.
Y acá a esta variable le vamos a asignar el objeto ng model.
Entonces este objeto es el que contiene los mensajes de error.
Entonces ahora hacemos referencia a esta variable a nombre acá.
Entonces nombres punto invalid para preguntar si es invalid y tiene que mostrar el mensaje error en
2.
Contexto 1.
Si estamos escribiendo y a medida que vayamos escribiendo es inválido, o bien si ya escribimos el valor
en el input y nos salimos del foco.
Es decir, hacemos un clic fuera del input.
Ahí también debería mostrar el mensaje.
Entonces por eso vamos a agregar nombre Dirty o con doble point nombre touche.
Como decía Dirty.
A medida que uno escribiendo va mostrando mensaje, error y touche, nuestro mensaje error.
Cuando nos salimos del foco del input, continuemos, vamos al div y acá vamos a mostrar el mensaje
de error.
Solamente para el recuadro.
Entonces en este div en if
nombre punto errors, el atributo erros recayÃ.
Acá mostramos el texto cuando falla el requiriÃ nombre es requerido o por qué cosa?
Vamos a copiar y vamos a pegar acá.
Y lo mismo para el Milenka.
Entonces acá el nombre
debe tener al menos 4 caracteres.
Perfecto.
Ahí estamos mostrando los mensajes para ambos baleados.
Y esto mismo tenemos que replicar también para cada campo.
Cada campo va a tener su validador, su propio mensaje customizado y básicamente todo se replica.
Es muy parecido en apellido, en email.
En fin, vamos a tener entonces acá el gato, el apellido Aichi Model.
Vamos a copiar el div.
Lo vamos a dejar justamente abajo, pero solamente vamos a dejar requeria.
Pero en vez de nombre.
Acá sería apellido.
Y acá también.
Acá también.
Y cambiamos también todo con Happy, vámonos.
Animais, además de ser requerido, también vamos a validar que sea un email con formato correcto.
Y por supuesto, también tenemos que asignar el objeto en model a nuestra variable email o el nombre
que queremos colocar.
Bien, copiamos y pegamos a Cacería y.
Y acá también email a apellido Abacería sería apellido, acá sería email.
Vamos a copiar y vamos a tener también el mensaje de error para el correo.
Cuando el correo tiene un formato inválido, la cacería y mail errors en vez de recoger email acá debe
tener un formato válido y guardamos.
Vamos a levantar nuestro proyecto tanto el Wacken como el proyecto con Angular y ya lo tengo lantado,
así que simplemente con clic derecho lo levanta como siempre.
Una vez que violentar servidor, volvemos acá y levantamos nuestra aplicación angular.
Hacemos clic en Crear cliente para ir al formulario.
Si hacemos un clic y escribimos, por ejemplo, los caracteres automáticamente como estamos escribiendo,
acá se aplica el dirty que estamos editando.
Escribiendo sobre el campo iba mostrando el mensaje error del bateador con dogmas desaparece.
Perfecto.
Ahora, qué pasa si borramos a aparece el nombre requerido?
Si hacemos clic o nos salimos del foco del input, hacemos clic.
Por ejemplo, en apellido se mantiene, es requerido y acá aplica el el touch.
Es que nos salimos de foco del input.
El campo es inválido, por lo tanto muestra el mensaje de error y pasaría lo mismo con apellido.
Si nos salimos de foco, hacemos clic en otra parte.
Muestra también que requirió Fulano a esta perfecto zuliano.
Está perfecto.
Vamos a escribir por ejemplo Hola!
Y de tener un formato Alioth perfecto, está funcionando bien, ya está saliendo por el correo.
El único problema es que si dejamos todo ha sido con los mensajes de error.
Igual podemos crear y hacer un clic en el botón.
Entonces la idea ahora como siguiente paso es deshabilitar el botón.
Lo dejamos en Disable mientras el formulario sea inválido y cuando esté todo correcto, estén todos
los campos bien validados.
Lo activamos.
Vamos a ello.
Bien.
En realidad es bastante simple.
Solamente tenemos que asignar en form también una variable global de nuestra vista formulario con el
objeto en txi form.
Con este objeto podemos saber si el formulario es válido o no. Entonces también usando Gatto le damos
el nombre que creamos, por ejemplo cliente form.
Y acá en Chile Form en vez de en yí model es en Gifford.
Bien, bajamos a los input.
Acá tenemos dos botones, así que tenemos que hacerlo en los dos y en el input y en los botones.
En los button tanto para crear como para actualizar.
Tenemos que agregar la directiva disable utilizando los corchetes y ahora tenemos que usar el objeto
que tenemos definido más arriba.
El cliente form justamente para validar.
Entonces si es válido, tenemos que tener el botón habilitado.
De lo contrario, lo deshabilitados
a cada retornar true o fols.
Y dependiendo eso lo va a deshabilitar.
Por ejemplo, si es válido y la negación de válido es fols.
Entonces va a estar habilitado.
Pero si es false.
Por lo tanto es inválido.
La negación de effort es true.
Entonces disable igual true queda deshabilitado.
Bien, y esto mismo tenemos que copiar en el otro button en el arte y con esto guardamos bien.
Ahora vamos a probar.
Si se fijan de forma automática, está completamente deshabilitado.
No se puede enviar.
Entonces, hasta que no esté completamente válido el formulario, no vamos a poder enviar ningún dato
al servidor y eso es lo correcto.
Ah, no me sirve tener 4 caracteres.
Ahí tiene 3.
Perfecto el apellido, solamente que sea requerido.
Por lo tanto, si lo omitimos, si se fijan, si nos salimos del foco del input, hacemos un click en
otro campo, en otra parte aparece el mensaje.
No podemos hacer nada hasta que tengamos un valor igual al correo.
El email debe tener un formato válido, incluso si omitimos la extensión.
También es un correo válido.
Por qué muchas corporaciones que utilizan correo interno de la empresa sin extensiones que se tienen
que detectar y validar como correctos?
Perfecto.
Y para que tengan más detalles sobre los validador que existen en Angular, se pueden ir a buscar,
por ejemplo validad itor y todo lo que aparecen en Nappy, todo nombre de clase que contenga como sufijo
validad validador, por ejemplo recayÃ validad itor.
Después tenemos y mail validad itor otro valedor.
También tenemos max lecc.
Validad itor mint laing validad itor pattern validad itor.
Hoy podríamos utilizar el patrón validad itor para expresiones regulares.
Si queremos customizar nuestra propia validación, están todas de color como fucsia y con dé, lo que
significa que son directiva.
Son todas directivas.
Por lo tanto se pueden incluir como un atributo, como una directiva en el campo.
Y con esto terminamos.
Hemos llegado a su fin.
Cualquier duda que tengas publica en el foro.
Nos vemos.