Habíamos tratado con formas reactivas en una de las lecciones anteriores,
donde hicimos dos ejercicios relacionados con formas reactivas,
cómo las creamos,
y luego también hacemos alguna validación básica de formas reactivas.
Continuaremos con el tema de esta lección,
porque las formas reactivas como su nombre lo indica,
tiene algo que ver con la programación reactiva como usted podría haber esperado.
Ahora, las formas reactivas también le permiten observar cambios en los valores de los elementos del formulario,
usando un observable que Angular pone a disposición llamado ValueChanges.
Vamos a hacer uso de ValueChanges observable en este ejercicio,
con el fin de realizar un seguimiento de los cambios en los valores de
sus diversos elementos de formulario y luego activar inmediatamente la validación de formulario.
En este ejercicio vamos a hacer la mayor parte de la validación del formulario en código
en lugar de en la propia plantilla,
como hicimos con la validación del formulario del reactor en el segundo ejercicio de formas reactivas.
Al ir a contact.component.tsfile,
vamos a actualizar la forma reactiva que hemos creado aquí,
añadiendo algunos validadores más para algunos de estos campos.
Por lo tanto, aquí ves que para el primer apellido y
el número de teléfono y el correo electrónico hemos añadido los validadores requeridos.
Para el nombre y el apellido,
voy a añadir un par de validadores más para
la longitud mínima y la longitud máxima.
Ahora, si tiene más de un Validador en su forma reactiva,
tiene que declararlos usando una matriz allí.
Entonces, esto tiene que estar encerrado dentro de una matriz aquí.
Entonces, verá que he incluido el validador requerido dentro de una matriz.
Voy a agregar un Validators, minLength Validator.
Por lo tanto, para la longitud mínima especificaré dos como la longitud mínima,
por lo que el nombre debe contener al menos dos caracteres.
También la longitud máxima que voy a
añadir como 25 caracteres.
Entonces, aquí ves que ahora para el primer nombre tenemos tres validaciones diferentes,
todas encerradas en una matriz aquí.
Se requieren validadores, validadores minLength,
y validadores maxLength aquí, 25.
Por lo tanto, voy a hacer lo mismo también por mi apellido.
Así que, permítanme copiar todo este rayo de validadores aquí,
y luego reemplazar este con ese conjunto de validadores.
Ahora, además, para el número de teléfono,
como recordarías en la versión anterior del formulario,
el número de teléfono estaba dispuesto a aceptar incluso alfabetos,
pero eso no es correcto.
Los números de teléfono suelen ser números.
Por lo tanto, aquí es donde usaremos otro Validador
llamado Validadores de patrón.
Por lo tanto, el Validador de patrón nos permite especificar un patrón para
los valores introducidos en ese elemento de formulario en particular,
y luego verificar para asegurarse de que el valor sigue el patrón especificado.
Por lo tanto, aquí el patrón que vamos a utilizar es que el valor
debe contener sólo números entre cero y nueve.
Para agregar el patrón,
tenemos que hacer eso en el archivo de plantilla como veremos en poco tiempo.
Del mismo modo, para el correo electrónico,
también tendré otro Validador llamado como el Validador de correo electrónico.
Por lo tanto, añadiremos en el correo electrónico de Validators.
Esto también significa que tenemos que añadir un atributo
llamado correo electrónico a la entrada en nuestro archivo de plantilla.
Ahora, con estos cambios, mi validación de formularios se ha vuelto más robusta en este ejercicio.
Ahora, cuando el formulario experimenta cambios en cualquiera de sus elementos de formulario,
, entonces el marco angular proporciona un observable llamado ValueChanges observable.
Entonces, voy a usar el valor observable ValueChanges en mi formulario de comentarios.
Entonces, el ValueChanges observable.
Por lo tanto, el observable ValueChanges ahora se puede suscribir dentro de este método en particular.
Así que cuando creamos el formulario en sí,
nos suscribiremos a los valores observables aquí.
Ahora, cuando ValueChanges,
así que suscribiéndose a este observable,
dentro de la suscripción especificaré lo que se debe hacer cuando los ValueChanges.
Entonces, cuando valueChanges obtendría algunos datos aquí,
de la granja para indicar
qué elemento de forma particular ha experimentado el cambio en el valor.
Luego, cuando eso suceda,
voy a activar un método local que implementaré llamado onValueChanged,
y luego suministraré esos datos como un parámetro para este método.
Ahora, dentro de este método onValueChanged,
voy a iniciar la validación del formulario,
y luego definir adecuadamente los mensajes de error del formulario en función de lo que
este objeto de datos que obtengo aquí me especificará.
Además, cuando creo por primera vez el formulario,
Llamaré al método onValueChanged sin ningún parámetro,
y esto se usaría para
restablecer mensajes de validación de formularios.
Ahora, ¿cómo creo los mensajes de validación de formularios?
Para hacer eso, voy a definir mis mensajes de validación de formularios completamente en código aquí.
Luego, a través del código,
adaptaremos los mensajes de validación del formulario,
y que luego se usarían para mostrar los mensajes de error en mi plantilla de formulario.
Entonces, para hacer eso, lo que voy a hacer es agregar algunos objetos JavaScript aquí.
Uno de los objetos JavaScript que voy a agregar se denomina como errores de formulario.
Entonces, este es un simple objeto JavaScript que
contendrá todos los errores para el formulario particular aquí.
Así que dentro de los errores de formulario,
usaré cuatro campos diferentes,
nombre, apellido.
Así que como usted recuerda,
estos corresponden a los cuatro elementos del formulario en los que estoy haciendo la validación del formulario,
número de teléfono y correo electrónico.
Ahora, ¿por qué defino este objeto JavaScript aquí?
Ahora, este objeto JavaScript como ves contiene cuatro elementos aquí.
Ahora, cada vez que hago la validación del formulario,
recuerdo que ya especificé que
voy a crear un nuevo método llamado onValueChange.
Dentro de OnValueChange, la forma en que se escribe el código es que,
si se detecta algún error,
una cadena que contiene el mensaje correspondiente a
ese error se agregará a este objeto JavaScript.
Entonces, de esta manera dentro de mi código,
puedo hacer la validación del formulario.
Ahora, además de esto,
voy a definir algunos mensajes de validación.
Ahora, este patrón particular de hacer cosas,
aprendí leyendo la documentación sobre validación de formularios en el sitio web angular.io.
Por lo tanto, tienen toda una documentación sobre cómo hacer la validación de formularios y un enlace al que está
disponible en los recursos adicionales de
este capítulo y también en los capítulos anteriores sobre formas angulares.
Entonces, allí en ese documento en particular
prescriben esto como una forma de hacer la validación de formularios y encontré que era muy intuitivo.
Entonces, también adopté el mismo patrón para hacer la validación de formularios en el código.
Así que, junto con aquí,
voy a definir los mensajes de validación para todos los campos posibles aquí.
Así que, para el campo de nombre,
voy a definir algunos mensajes de validación aquí, así que yo diría,
«requerido» y luego decir,
«se requiere nombre» como este,
Voy a añadir en algunos mensajes de validación
aquí y decir,
«El nombre debe ser
al menos 2 caracteres de largo» y luego yo también agregará,
«longitud máxima» y el mensaje correspondiente sería,
«Nombre no puede ser más de 25".
Si tienes un nombre que tiene 25 caracteres,
debes estar maldiciendo a tus padres por eso, créanme,
uno de mis dos nombres es un segundo nombre largo,
y que no uso explícitamente en mis documentos.
Pero, puedo entender el dolor,
si tienes un nombre largo mayor que 25 caracteres.
Personas de algunos estados del sur de la India tienen nombres largos,
mi estado incluido, hey,
vamos a divertirnos mientras estamos en ello.
Vale, también voy a incluir lo mismo para el apellido.
Entonces, voy a editar este
y especificar lo mismo que el apellido.
Entonces, como ve dentro del código, puede especificar un conjunto de mensajes de error.
Ahora, si agrega nueva validación a sus formularios,
todo lo que necesita hacer es,
venga aquí y agregue el nuevo mensaje de error en
este objeto JavaScript aquí y su código funcionará bien, como tal.
Entonces, esa es la ventaja de usar este patrón para diseñar su validación en código.
Continuando, permítanme definir la validación para el número de teléfono y
las dos validaciones para los números de teléfono que sucedería es la «requerida».
Entonces, solo voy a copiar el «requerido» desde allí,
y pegarlo aquí,
y yo diría,
«El número de teléfono es obligatorio», y el siguiente mensaje de error sería para «patrón».
Por lo tanto, el mensaje de error dice,
«El número de teléfono debe contener sólo números».
Entonces, ese es el otro mensaje, de manera similar para el correo electrónico.
Entonces, como puede ver, los valores que estoy usando aquí
corresponden a los nombres del Validador que he usado,
«longitud media», «longitud máxima requerida», «patrón».
Así que, de manera similar para el correo electrónico,
verías «requerido» y «Correo electrónico'.
Entonces, solo voy a copiar el «requerido» aquí y decir, «Se requiere correo electrónico».
El otro patrón como usted recuerda es para el correo electrónico y yo diría,
«Correo electrónico no en formato válido».
Por lo tanto, normalmente si su correo electrónico no contiene
un signo @ y caracteres en ambos lados del signo @,
entonces eso no es un correo electrónico válido.
Este validador de correo electrónico ya está integrado en el módulo de formas reactivas angulares.
Por lo tanto, haremos uso del validador de correo electrónico aquí.
Entonces, aquí tenemos todos los mensajes de validación definidos en código.
Por lo tanto, eso hace que sea muy fácil extenderlos para campos adicionales si lo requiere y también
agregando más mensajes de validación para validaciones adicionales
que podría introducir para cada uno de esos campos de formulario.
Además, estos errores de formulario de objeto me ayudan a rastrear
todos los errores asociados con cada uno de los elementos en mi teléfono.
Así que, actualmente solo compruebo estos cuatro elementos,
así que es por eso que solo tengo para eso.
Corrección menor, la «longitud media» debe ser min,
pequeña 'l' y longitud máxima también con una 'l' pequeña,
de manera similar para el apellido también.
Ahora, vamos a escribir el código para el método on values changed.
Entonces, voy a escribir el método
aquí, "ValueChanged» y luego este
tomará un parámetro, posiblemente.
Es por eso que puse un signo de interrogación de datos,
, lo que significa que el parámetro es opcional.
Así que, lo primero que voy a comprobar es, «este formulario de retroalimentación»,
lo que significa que si el formulario de retroalimentación no ha sido creado entonces,
y si se llama a este método,
entonces usted simplemente debe «volver» sin nada.
Entonces, definiré una constante
llamada «este feedback
form» es solo para que sea fácil definir el resto del código,
entonces yo diría, «para
const field in this.form errors».
Por lo tanto, observe que este campo tomará estos errores de.form,
el objeto de errores de formulario que hemos definido anteriormente.
Por lo tanto, sentir significa que voy a comprobar los cuatro.
Así que, cada vez que detecto cualquier cambio,
el nombre, el apellido,
número de teléfono y un correo electrónico.
Entonces, es por eso que estos cuatro llevarán exactamente los mismos nombres que usamos en el formulario aquí,
y para que el código escrito aquí sea sencillo de trabajar.
Por lo tanto, ahora voy a comprobar los campos del formulario.
Entonces, primero
me aseguraría de que en caso de que haya adjuntado algún mensaje a estos campos de formulario,
errores de formulario objeto allí,
luego voy a borrar todos ellos.
Entonces, es por eso que si llamas a esto sin parámetro,
se borrarán todos los campos de error de formulario,
y luego haría, «controlar FormGet».
Entonces, observe que estoy usando ese campo en sí para hacer un FormGet, así que
estoy obteniendo acceso a ese campo de formulario en particular.
Por lo tanto, observe que antes estábamos haciendo «feedbackform.this.feedbackform.get"firstname».
y así sucesivamente. Por lo tanto, he simplificado qué en esta constante particular que definimos
aquí y luego diré, «Si el control».
Entonces, lo que significa que si el control no es nulo y «control.dirty».
Entonces, si ese campo en particular ya está sucio
y no «control válido».
Entonces, significa que para cada uno de los campos,
estoy literalmente comprobando para ver si es válido,
si está sucio,
y luego si el control ya está allí.
Entonces, voy a verificar qué tipo de errores se han agregado a
este control particular por el formulario allí.
Así que, aquí voy a decir,
«mensajes const iguales
a este campo de mensajes de validación».
Observe cómo estoy recogiendo
todos los mensajes de validación correspondientes a ese campo particular firstname,
lastname, o telnum o email,
y luego verificaré y veré si necesito agregar esto al campo.
Entonces, ¿cómo hago eso?
Entonces, lo hacemos para clave const en control.errors.
Entonces, observe que este control es el campo de retroalimentación form.get y.error,
, así que estoy verificando si hay algún error allí.
Entonces, en ese caso,
agregaré este campo de errores de formulario.
Entonces, para ese elemento en particular en el objeto JavaScript que he definido aquí,
agregaría mensajes clave
plus y espacio aquí.
Así que, ahora cualquier encuesta de error de formulario
o el mensaje correspondiente será tomado y adjuntado en,
y luego mi formulario errores de objeto JavaScript ahora contendrá
todos los mensajes de error adjuntos juntos cuando
este particular en valores cambiado ratas método.
Ahora, esta pieza particular de código que he tomado prestado de
la documentación de validación de formularios en angular.iu.
Descubrí que esta es una forma muy intuitiva de hacer la comprobación de errores de formulario.
Entonces, pensé por qué no hacer uso de eso dentro de nuestro ejercicio de formas reactivas angulares.
Entonces, agregando este código allí.
Ahora, mi aplicación está lista para hacer la validación del formulario para mi formulario reactivo.
Entonces, ahora el siguiente paso es ir al componente de contacto.html,
el archivo de plantilla y, a continuación, actualice el archivo de plantilla.
Así que, yendo a ese archivo de plantilla,
ahora vamos a ir al formulario,
y el en este formulario ahora en lugar de hacer todas estas comprobaciones en el código,
ahora podemos simplificar gran parte del código aquí en el archivo de plantilla aquí.
Ahora, en lugar de hacer todas estas comprobaciones,
lo que nos damos cuenta es que el objeto JavaScript de errores de formulario en
mi archivo mecanografiado si hay errores, entonces
el objeto JavaScript de errores de formulario para ese campo en particular,
tendrá todos los mensajes de error adjuntos a él.
Si no hay errores,
entonces esos mensajes de error no estarán allí.
Entonces, eso es lo que voy a usar para verificar y
ver si debería mostrar el error de formulario o no.
Entonces, para ese caso en lugar de verificar todo esto,
lo único que necesito verificar aquí es formErrors firstname, eso es todo.
Por lo tanto, muy fácil de comprobar si hay errores aquí.
Del mismo modo, por lo que todo este código ahora se simplifica aquí,
y de manera similar cuando verifica el mensaje aquí,
lo que vamos a hacer, voy a cambiar todo esto de
requerido tocado a formErrors.firstName.
Eso es todo. Si eso existe,
, entonces todos los mensajes de error correspondientes a esto ya estarán allí,
, así que solo necesito hacer interpolación y
luego mostrar formErrors.FirstName aquí,
tan simple como eso.
Ahora, ves haciendo
toda la validación de errores de formulario y código y haciendo todas las comprobaciones y así sucesivamente en el código,
ya has construido los mensajes de error que necesitamos mostrar.
Todo lo que hacemos es tomar ese mensaje de error y luego poner
esto en la plantilla aquí, eso es todo.
El código de la plantilla se simplifica más en este caso particular,
y también haciendo la validación del formulario usando el código mecanografiado,
hemos simplificado la plantilla aquí al mismo tiempo que podemos hacer
validación de formularios más complicada en nuestro código mecanografiado.
Voy a seguir adelante y hacer el mismo tipo de cambios en los campos restantes aquí,
así que para el campo apellido,
voy a volver a reemplazar todo esto con formErrors.lastName.
Ahora, de nuevo hacer lo mismo para el número de teléfono.
Ahora, de nuevo como ves la estructura de la plantilla se vuelve muy,
muy uniforme en este caso.
Por lo tanto, esa también es otra forma de simplificar
la estructura de su plantilla continuando con el campo de correo electrónico aquí.
Voy a hacer el mismo cambio en el campo de correo electrónico también.
Entonces, diría formErrors.email
y reemplace esto por formatters.email.
Así que como puede ver,
su código de plantilla se ha simplificado significativamente en comparación con antes.
Con esto toda la validación de errores que requiero
se ha agregado a mi plantilla y mi plantilla ahora está actualizada,
así que vamos a guardar los cambios.
Otras dos cosas que necesito agregar es el atributo
llamado correo electrónico a este campo particular llamado correo electrónico.
Por lo tanto, recuerde que hemos añadido el validador de correo electrónico aquí.
Así que, junto con lo requerido,
voy a agregar el correo electrónico también al campo de entrada aquí.
Del mismo modo, para el telnum,
usamos el patrón allí.
Entonces, voy a agregar el patrón para que este es el campo de entrada para el telnum.
Entonces, dentro del campo de entrada voy a agregar el patrón es igual y
el patrón que voy a agregar es
entre corchetes cero a nueve,
y luego poner una estrella allí.
Entonces, lo que significa que esto es algo cero a nueve repetidos varias veces.
Por lo tanto, el número de teléfono puede contener cualquier número entre cero y nueve.
Cualquier número de esos números.
También puedes poner un minlength y maxlength en el campo telnum
si para tu país particular el número de teléfono tiene un formato fijo,
también puedes hacerlo.
Por lo tanto, eso se puede hacer fácilmente.
Pero, en este ejercicio,
no agregué la restricción minlength y maxlength para el telnum aquí.
Ahora, que hemos hecho todas las actualizaciones,
vamos a guardar los cambios y luego ir a echar un vistazo al formulario en el navegador.
Al ir al navegador ahora,
vamos a desplazarnos hacia abajo al formulario aquí.
Vamos a escribir el nombre y como ves cuando escribes un solo carácter,
entonces el mensaje de error se muestra inmediatamente,
pero en el momento en que escribes caracteres adicionales ese mensaje de error desaparecerá.
Del mismo modo, para el apellido.
Para el número de teléfono, si intenta escribir algo que no sea números,
aparecerán los mensajes de error.
Por lo tanto, puede escribir,
de manera similar para el correo electrónico, para que vea que el formato del correo electrónico no es válido se mostrará.
Si no tienes el correo electrónico, también muestra el mensaje de error.
Pero, en el momento en que escribes algo como esto,
entonces esto se considera un formato de correo electrónico válido por lo que será aceptado.
Entonces, ese es el conjunto de mensajes de error y la validación del formulario
hecho completamente en código como se hizo en este ejercicio en particular.
Así que, con esto, completamos este ejercicio.
En este ejercicio, hemos visto que el uso del cambio de valor es observable,
y también vimos cómo podemos hacer validación de formularios en nuestro código mecanografiado.
Esto completa este ejercicio.
Este es un buen momento para que hagas un commit de git con
, el mensaje reactivo forma la tercera parte.