[MUSIC]
Ahora que hemos tenido una rápida introducción a la validación de formas reactivas en
la conferencia anterior, procedamos al siguiente ejercicio donde podríamos
aplicar la validación de formularios a la forma reactiva que creamos en el ejercicio anterior.
Así que yendo a nuestro archivo mecanografiado de componentes de contacto,
vamos a agregar los validadores de formularios a cada una de estas propiedades dentro de nuestro modelo de formulario.
Entonces, para el primer nombre, diría dentro de la matriz, Validators.
Requerido, Del mismo modo voy a
aplicar lo mismo a la, apellido.
Entonces email, y también para el telnum, así que para
el telnum yo diría que para los tres restantes puedo dejarlos abiertos,
porque estoy de acuerdo con ser falso o verdadero y darles otros valores.
Debido a que es un ligero cambio y contacttype puede tomar solo un
de los tres valores y el valor predeterminado ya se da allí,
y para el mensaje, podemos hacer que no sea un valor requerido.
Si el usuario no quiere escribir comentarios,
puede permitir que no escriba comentarios, pero si lo desea,
puede agregar los validators.Required incluso para el mensaje.
Además, cuando restablece el formulario en el método OnSubmit aquí
también puede restablecer el formulario a su valor inicial como especificamos
en el método donde creamos el formulario.
Entonces, dentro del valor de restablecimiento, toma un objeto como parámetro aquí.
Este objeto será utilizado por el método reset haciendo
uso del método set value que vimos en la conferencia anterior para restablecer
el formulario a la condición tal como era cuando se creó originalmente.
Así, aquí podemos suministrar parámetros
como firstname: '',
lastname: '', telnum: 0,
Entonces email: '',
de acuerdo: false,
contacttype: 'Ninguno',
message: ''});.
Así que estos valores que suministramos en este objeto JavaScript
que nos damos el parámetro para el método reset
tendrán exactamente los mismos valores que vimos para
estas propiedades cuando creamos ese formulario de retroalimentación.
También necesitamos restablecer el formulario completamente en la plantilla.
Así que para hacer eso, para volver a la importación aquí, y
luego también importaremos ViewChild} desde '@angular /core';.
Esto nos permitirá obtener acceso a
cualquiera de los elementos dom secundarios dentro de mi plantilla.
Así que después de hacer esto, entrando en el código,
aquí en el ContactComponent, puedo decir @ViewChild,
y luego podré hacer referencia al FeedbackForm por
dándole una variable de plantilla con el nombre fform.
Vas a hacer eso en el siguiente paso, y luego para esto,
me referiré a esto usando feedbackFormDirective.
Así que esto nos permite obtener acceso al formulario de plantilla y luego restablecerlo completamente
, de modo que el formulario mismo se restablezca de nuevo a su valor prístino.
Así que este es otro paso adicional que tenemos que hacer para asegurarnos de que el formulario sea
completamente restablecido a su valor inicial aquí.
Ahora, habiendo hecho eso en el método onSubject, después de restablecer el objeto FeedbackForm
aquí, también necesitamos agregar
en this.feedbackFormDirective.resetForm ();
Allí.
Así que esto asegurará que mi FeedbackForm se restablezca completamente a su valor
prístino en este punto.
Así que después de estos cambios vamos ahora a nuestra plantilla
archivo para mostrar cómo podemos reflejar estos errores
en nuestra plantilla para nuestro formulario allí.
Entonces, cambiando al archivo de plantilla.
Así que primero, vamos a ir al botón aquí, y
luego vamos a hacer que el botón Desactivado.
Si el «FeedbackForm no es válido».
Por lo tanto, el botón estará habilitado sólo cuando el FeedbackForm sea válido.
Pasando a ese formulario permítanme agregar en
el <mat-error *nGIF="feedbackForm.get» get
('firstname') .hasError ('required')
&&
feedbackForm.get ('firstname')
.touched», y el mensaje es Se requiere Nombre.
Así que ese sería el mensaje que asignas usando una sola línea con lo oculto,
con esta información allí.
Permítanme aplicar lo mismo al apellido,
Número de teléfono y el correo electrónico.
Así que solo voy a copiar, pegar, y editarlos,
para que pueda continuar con ellos, y ('apellidos').
Apellido.
Telnum.
Así que aplico eso a ('telnum').
Una vez más, la misma idea detrás de eso y luego también para correo electrónico.
('correo electrónico').
Vamos a añadir en la variable de plantilla llamada fform al formulario.
Así que escribo #fform ="ngForm».
Ir a nuestro formulario en el navegador, déjame escribir en el nombre,
y ves que incluso si elimino el valor seguirá siendo verde,
porque usamos el tocado allí.
Pero en el momento en que me aleje de ella entonces
podrá ver que eso se convierte en un color rojo.
De manera similar para el Apellido verá que cuando
elimine el valor Apellido, entonces eso se muestra allí de manera similar.
Permítanme escribir el nombre y el apellido, y para el correo electrónico también.
el, El mismo caso para el número de teléfono también.
Así que así, puede hacer validación de formularios en nuestra aplicación.
Con esto, completamos este ejercicio donde tenemos
añadido en validación de formulario a nuestra forma reactiva.
Este es un buen momento para que hagas un commit de git con el mensaje,
reactivo forma la segunda parte.
[MÚSICA]