Con una breve comprensión de las Formas Reactivas Angulares,
vamos a pasar al siguiente ejercicio.
En este ejercicio, construiremos
una Forma Reactiva Angular en la aplicación Angular en la que hemos estado trabajando hasta ahora.
En el camino, consolidaremos nuestra comprensión de las Formas Reactivas Angulares.
Para empezar con el ejercicio,
el primer paso que tenemos que hacer es importar
el módulo Angular Reactive Forms en nuestro módulo de aplicación.
Entonces, vamos al módulo de la aplicación,
y luego vemos que ya habíamos importado el módulo de formularios antes.
También importaremos el módulo Formas Reactivas Angulares.
Entonces, voy a copiar eso, pegarlo aquí,
y luego cambiarlo al módulo Formas Reactivas Angulares.
Después de hacer eso, también necesitamos incluirlo en nuestro decorador.
Así que, bajando al decorador aquí,
voy a importar el módulo Formas Reactivas en el decorador.
Otros dos módulos que necesitamos importar para
nuestro formulario es el MatSelectModule, y el MatSlideToggeModule.
El módulo select nos permite utilizar el elemento select,
y el SlideToggle nos permite utilizar el botón slide en nuestro formulario.
Entonces, para hacer eso, vamos a escribir
importar MatSelectModule desde angular/material/select,
e importar MatSlideTogglemodule desde angular/material/slide-toggle,
y luego tenemos que agregarlos a nuestro decorador ngModel en las importaciones.
Así que, yendo allí,
déjame importar MatSelectModule y MatSlideToggeModule allí.
Así que, con estos cambios,
nuestro módulo de aplicaciones ya está listo para permitirnos
usar el módulo de formularios reactivos en nuestra aplicación.
En el siguiente paso,
lo que voy a hacer es crear una clase aquí llamada como Feedback.
Por lo tanto, lo crearé en la carpeta compartida en el archivo feedback.ts.
Ahora, esta es la estructura de la clase que representa
el modelo de datos correspondiente al modelo de formulario que vamos a usar
dentro de nuestra aplicación Angular.
Entonces, creo la clase llamada feedback.
Dentro de la clase Feedback,
voy a incluir algunas propiedades;
nombre, apellido,
luego número de teléfono, Telnum, correo electrónico,
entonces estoy de acuerdo que es una variable booleana,
propiedad booleana, contacttype que es de la cadena de tipo.
Será más claro para usted por qué incluyo todos
estos cuando miramos el diseño del formulario en sí.
Esta clase de comentarios en particular corresponde a los comentarios que
un usuario puede enviar sobre nuestro restaurante dentro de nuestra aplicación Angular.
Entonces, esa es la razón por la que creo esta clase de comentarios.
Vamos a mapear esto en el modelo de formulario en
uno de los componentes allí y también junto con eso,
exportaré una constante que es una matriz de cadenas llamada
contacttype que como
mencioné es una matriz de cadenas que contiene tres cadenas aquí,
none, Tel y correo electrónico.
Entonces, ahora nuestra estructura de modelo de datos está lista.
Así que, más adelante, cuando desarrollemos nuestro lado del servidor,
podremos mapear esto en un dato que almacenemos en el lado del servidor.
Así que, dentro de nuestra aplicación Angular,
esto forma el modelo de datos que vamos a utilizar para nuestra aplicación al igual que el plato,
el líder, y la promoción que hemos desarrollado esta es otra clase que
nos permite agrupar un conjunto de propiedades en una clase aquí.
Así que, una vez que hayamos completado eso,
vamos a proceder con la creación de la forma Reactiva.
Vamos a crear el formulario Reactivo en nuestro componente de contacto.
Por lo tanto, vamos al archivo component.ts de contacto,
y también vamos a incluir
el formulario correspondiente en el archivo de plantilla de componentes de contacto.
Entonces, en el archivo de script de tipo de componentes de contacto,
así que aquí es donde vamos a preparar nuestro formulario
ya que vimos que el formulario Reactivo se construye principalmente
en el código y luego se mapea en los elementos del formulario en el archivo de plantilla.
Entonces, aquí voy a importar algunas clases.
Importaré FormBuilder,
y luego FormBuilder, y validadores.
Los validadores se usarían para la validación de formularios, que será en el próximo ejercicio,
, pero ya los importaré en este momento.
Se importan desde la biblioteca de formularios angulares.
Así que, una vez que importemos esto,
importaremos la clase Feedback y la constante contacttype
del archivo compartido/feedback
que acabamos de crear en el paso anterior.
Necesitamos esto dentro de nuestra aplicación.
Ahora, dentro de mi clase aquí,
voy a declarar algunas variables llamadas feedbackForm que es del tipo FormGroup.
Este es el modelo de formulario que va a alojar
la forma Reactiva aquí y luego voy a
declarar una retroalimentación variable del tipo Feedback,
por lo que este sería el modelo de datos correspondiente.
Más tarde en este valor de Feedback se puede obtener de un servidor dentro de nuestra aplicación,
y luego también declararé el contacttype como una variable
que es de la matriz de cadenas contacttype.
Porque necesito hacer uso de esto dentro de nuestra aplicación.
Para construir la forma Reactiva dentro del constructor,
inyectaría FormBuilder en el constructor aquí,
y crearía un método separado llamado
CreateForm que invocaré dentro del constructor,
así que cuando se construya esta clase, se creará el formulario.
Entonces, CreateForm será un método dentro del cual crearé el formulario real.
Entonces, permítanme agregar el método CreateForm aquí.
Esto es solo conveniencia, podría haber simplemente
incluido el código directamente en el constructor en sí,
pero verá que podría haber razones por las que
podría necesitar llamar a este CreateForm desde otras ubicaciones.
Entonces, es mejor ponerlo en un método separado aquí.
Entonces, crearé el formulario aquí, Forma reactiva,
y luego lo pondré en la variable FeedbackForm que he declarado anteriormente.
Así que, para crear el formulario,
voy a tomar la ayuda del FormBuilder,
el FB que he declarado en el constructor,
y luego el FB proporciona un método llamado Grupo que me permite
definir un grupo, un FormGroup aquí.
Así que, dentro de allí, ahora voy a construir las partes de la forma allí.
Así que, dentro de este grupo,
ahora puedo incluir los diversos controles de formulario allí.
Entonces, primero pondría el nombre,
y luego el apellido.
Observe cómo los campos dentro de mi formulario están
reflejando estrechamente los campos dentro de mi clase de comentarios.
No tienen que coincidir exactamente, pero si coinciden,
luego transferir los datos entre
el modelo de datos y los cuatro modelos se vuelve mucho más sencillo.
Telnum que voy a dejar porque uh-
He añadido nombre, apellido,
Telnum, correo electrónico, y de acuerdo, y el tipo de contacto,
que voy a establecer como ninguno para empezar.
Recuerde que el tipo de contacto es una matriz de cadena que contiene tres de ellos
, por lo que debe elegir uno de ellos y luego asignarlo a esta propiedad aquí.
Por lo tanto, voy a elegir esto como ninguno y luego el mensaje,
que será la retroalimentación que el usuario da sobre
nuestro restaurante mapeado en una cadena aquí.
Por lo tanto, estos son los diversos campos que formarán parte de nuestro formulario aquí.
Así que, una vez que tengamos la estructura del formulario en su lugar aquí,
así que noten que cuando se llame a este método,
esta forma será la forma reactiva se creará en el código aquí.
Ahora, necesitamos mapear esto en la vista,
en la plantilla allí.
Por lo tanto, vamos a hacer eso en el siguiente paso.
Así que, ahora, yendo a nuestro archivo de plantilla,
en el archivo de plantilla de componente de contacto,
nos desplazaremos hacia abajo y luego incluiremos esto en
nuestro archivo de plantilla justo después de este div aquí,
así que tenemos este div en nuestra vista de contacto que contiene la información de ubicación y así sucesivamente.
Justo después de eso, voy a crear otro div dentro de
que albergará la forma reactiva allí.
Déjame aplicar algunas cosas de diseño flexible
aquí a mi div.
Ahora, este tamaño de formulario como puede ver debería ser
una clase CSS que crearé un poco más tarde.
Dentro de este div, voy a alojar mi formulario.
Entonces, una vez que puse este div en mi archivo de plantilla,
ahora déjame comenzar con un encabezado para esto.
Por lo tanto, diremos, «Envíenos sus comentarios».
Por lo tanto, usted está buscando los comentarios de los visitantes de su sitio.
Comenzaremos a construir el formulario.
Entonces, permítanme comenzar con la etiqueta de formulario
aquí y luego construiremos el formulario dentro de esta etiqueta de formulario aquí.
Entonces, para el formulario, lo primero que haré es aplicar
la no validación porque la validación será atendida por angular,
y luego también aplicar un grupo de formularios aquí.
Entonces, observe que este grupo de formularios es el que me vinculará al modelo de formulario reactivo
que creé en mi código aquí.
Así que, al hacer esto,
estamos vinculando en esta forma reactiva en la plantilla a
el modelo de formulario correspondiente en nuestro archivo mecanografiado allí.
Por lo tanto, la forma en que lo hacemos es declarar el grupo de formularios y el formulario de retroalimentación.
Te mostraré cómo vincular en
los elementos de formulario restantes a
las propiedades correspondientes en el modelo de formulario en poco tiempo.
Entonces, después de hacer esto,
vamos a poner en nuestro formulario elementos en su lugar dentro de este modelo de formulario.
Entonces, declararé una P por aquí y luego dentro de allí,
usaré el campo mat-form-campo aquí,
a la que aplicaré una clase CSS llamada Half-width,
y cerraré esto.
Entonces, esto pondría mi primer control de formulario en su lugar aquí.
Entonces, aquí, pondré la entrada y luego aplicaré el MatInput del material angular aquí.
Para vincular esto a la propiedad dentro de mi modelo de formulario,
necesitaría hacer FormControlName,
y el primero es el nombre.
Entonces, de esa manera, esta entrada ahora está vinculada a la propiedad de primer nombre
que he definido dentro de mi modelo de formulario que he definido en el código.
El primer nombre, y luego definiré
el marcador de posición como nombre.
Así que, como es de esperar,
este campo de entrada se va a utilizar para escribir
el nombre del usuario, escriba texto.
Curiosamente, ves que ya no tenemos el modelo ng-aquí
o ninguna de las variables de plantilla y así sucesivamente en mi forma.
Las formas reactivas funcionan de manera diferente.
Por lo tanto, como puede ver en las formas reactivas,
asigna el grupo de formularios y luego intenta los nombres de control de formulario.
Si está creando controles de formulario con la clase de control de formulario,
declararía esto como control de formulario entre corchetes y luego lo emparejaría
con el control de formulario correspondiente que cree en su tipo escéptico.
Pero ahora ya que estamos usando el constructor de formularios,
solo necesito vincular en el grupo de formularios como
esto en mi formulario al modelo de formulario correspondiente,
y luego el resto de ellos,
Declaro como nombre de control de formulario y luego los comparo con
las propiedades correspondientes en
el control de formulario que tengo en mi mecanografía de la manera de código.
Por lo tanto, esto creará el campo de nombre allí.
Déjame copiar esto.
Necesito un apellido aquí.
Entonces, voy a copiar esto y luego decir que el nombre del control del formulario es Apellido,
y el marcador de posición es Apellido,
y del tipo, Texto, aquí.
tuve nombre,
tenía apellido y si miras el modelo de control de formularios,
verás que después de nombre y apellido,
tengo el número de teléfono como el siguiente,
así que voy a pegar esto aquí.
Entonces, el nombre del control de formulario aquí es Telnum,
y el marcador de posición es Número de teléfono,
y el tipo es Tel.
Mientras estamos en ello,
voy a atar lo Requerido en estos aunque eso no es realmente requerido.
Pero permítanme agregar eso allí.
Ahora, número de teléfono, entonces tengo correo electrónico.
Entonces, el siguiente campo es Email,
y el marcador de posición es Email,
y el tipo también lo es.
Así que, ahora tengo primero,
apellido, y número de teléfono, y correo electrónico.
Lo siguiente que voy a añadir es un interruptor de diapositivas.
Antes usamos la casilla de verificación.
El deslizador es otro control de formulario que proporciona el material angular,
que es un poco diferente de la casilla de verificación y
pensé que voy a ilustrar con usted usándolo en el formulario aquí.
Ahora, aquí es donde usaré una tabla para posicionar estos elementos.
La razón es que,
estos elementos son difíciles de posicionar sin usar una tabla.
Así que, dentro de la tabla,
estoy seguro de que todos saben cómo usar la tabla,
intenté colocarlos usando el diseño flex estándar
y no tuve mucho éxito con eso.
Entonces, en cambio, recurre a usar una tabla para colocar estos dos elementos en mi forma.
Por lo tanto, mat-slide-toggle.
Por lo tanto, el deslizador es como la casilla de verificación,
puede activarlo y desactivarlo,
y esto puede seleccionar un valor booleano aquí.
Por lo tanto, slidetoggle y el FormControlName está de acuerdo.
Si recuerda, estábamos de acuerdo,
que era una propiedad booleana en el control de formulario.
Entonces, para esto, yo diría,
¿podemos contactar con usted?
Ahora, será más claro para ustedes cuando vean la versión final de
este formulario para entender por qué estamos haciendo esto.
Ahora mismo, vamos a poner todas las partes en mi forma reactiva aquí.
La segunda parte voy a usar un select,
que se soporta a través del componente mat-select en material angular.
Entonces, MD seleccione y para esto el marcador de posición,
definiré como «¿Cómo?»,
y formControlName con el que voy a vincular esto es
«contacttype» y cerrar el MD select.
Entonces, esto me permite crear un elemento de selección en mi formulario.
Entonces, el elemento de selección es algo que me da
una lista desplegable de la que puedo seleccionar uno de ellos.
Por lo tanto, para crear la lista desplegable,
voy a usar la opción de estera que está disponible como un componente en material angular.
Por lo tanto, la opción de estera se incluye dentro de la selección de estera.
Entonces, para la opción,
Voy a hacer *ngFor,
y estoy seguro de que recuerdas la directiva ngFor de antes,
*ngFor «Let ctype of contactType».
Ahora, ves por qué declaré la variable de tipo de contacto
en mi código antes y luego diría, [value] = «ctype».
Entonces, estoy configurando mi opción en mi selección aquí y usando interpolación,
escribiré ctype aquí.
Entonces, eso me dará un menú desplegable de opciones en mi formulario allí.
Así que, esa es la siguiente parte y finalmente,
después de la tabla, voy a poner en un área de texto aquí.
Entonces, yo diría p y cerrar esa P. Para peinar la forma reactiva,
el elemento P me permite posicionar los elementos correctamente.
Entonces, es por eso que estoy usando eso.
Entonces, como recordarán,
mat-form-field me permite
incluir un contenedor de entrada aquí y luego dentro de allí voy a definir un área de texto,
que aplico
la directiva MatInput a eso.
Entonces, el FormControlName, voy a dar como «mensaje».
Por lo tanto, este elemento de formulario en particular permite al usuario escribir
en el mensaje de retroalimentación para mi restaurante.
Entonces, marcador de posición «Your Feedback»,
y luego le daré al área de texto un tamaño de
12 filas aquí y luego cerraré el área de texto.
Por lo tanto, aquí tenemos un área de texto con las 12 filas.
Entonces, eso completa la mayor parte de la forma.
Lo sentimos, esto debería estar fuera de la mesa.
Necesitamos un botón para enviar el formulario.
Así que, justo ahí, incluiré un botón del tipo = «enviar» y
este botón de enviar aplicaré
el botón de mat-y también aplicaré la clase = «background-primary».
Me has visto aplicando esto al botón en el ejercicio anterior también,
tipo similar de botón.
Así que ahora mi formulario está casi listo.
Puede agregar algunas clases CSS al componente de contacto.
Las tres clases que he usado son de ancho completo,
esto se usa para establecer el tamaño de los elementos allí.
Entonces, ancho completo 95 por ciento, ancho medio.
Entonces, esto me permite dimensionar los elementos correctamente,
45 por ciento de ancho medio y luego tamaño de forma.
Entonces, uso estas clases CSS en mi forma.
Así que con esto, vamos a guardar los cambios,
y echar un vistazo rápido al formulario en nuestra solicitud.
Ir al navegador,
en la vista de contacto,
mientras se desplaza hacia abajo, ahora ve el formulario en su lugar en la vista de contacto aquí.
Por lo tanto, usted ve el envíenos sus comentarios,
el nombre, el apellido, el número de teléfono,
el correo electrónico y la diapositiva toggle aquí,
para que vea el interruptor de diapositiva en su lugar allí y luego este es este seleccionar.
La selección me permite seleccionar uno de estos tres.
El valor predeterminado es none y luego el área de texto aquí,
me permite escribir mis comentarios aquí y luego el botón submit.
Por lo tanto, esto completa el formulario reactivo en
mi solicitud pero cuando haces clic en el botón Enviar,
no podrás enviar este formulario.
Por lo tanto, tenemos que agregar el ngSubmit a nuestro formulario en la plantilla
y luego agregar un método en nuestro archivo de script de tipo.
Ir a nuestro código,
al formulario aquí,
junto con el formulario novalidate FormGroup,
voy a agregar un ngSubmit al formulario.
Llamaré al método como método onSubmit.
Así que con esto, mi formulario ya está listo para enviar información.
Necesito entrar en los componentes de contacto, archivo de script de tipo
y luego crear el método onSubmit aquí.
Entonces, en el método onSubmit,
sucede que el modelo de formulario es exactamente el mismo que los modelos de datos,
por lo que simplemente puedo tomar el valor del modelo de formulario.
Entonces, cuando tienes un modelo de formulario como este formulario de comentarios,
el formulario de comentarios da una propiedad llamada value,
que me permite recuperar el valor actual de todos estos de mi formulario de comentarios.
Entonces esto formará un objeto JavaScript,
que luego puedo mapear en el objeto JavaScript de retroalimentación.
Resulta que ambos tienen exactamente la misma estructura,
el modelo de datos y el modelo de formulario.
Entonces, es por eso que puedo cargar rápidamente el valor
directamente en el modelo de datos cuando el usuario envía el formulario.
Si su modelo de datos es algo diferente del modelo de formulario,
necesita asignar propiedades individuales explícitamente y
que se puede hacer dentro de este método allí.
Sólo para mostrarte que el formulario se envía correctamente,
voy a registrar el valor en la consola, la consola de JavaScript.
Entonces yo diría, this.feedbackForm.reset.
El método de restablecimiento le permite restablecer el formulario a su estado normal,
eliminando todas las entradas que ha realizado en el formulario.
Entonces, una vez que el usuario envíe,
normalmente capturaría los valores y luego restablecería el formulario para que
que la entrada adicional se puede hacer como una forma separada.
Así que ese es el método de reinicio que usaremos aquí.
Así que con estos cambios,
vamos a guardar los cambios y luego ir a ver nuestro formulario en acción.
Una última pequeña cosa que quiero agregar a mi plantilla es mostrarte
los valores del formulario dentro de mi propio formulario,
aunque en una aplicación real,
no estarías haciendo esto, pero solo quería ilustrarte cómo
puedes ver los valores del FeedbackForm directamente aquí,
del Modelo de FeedbackForm.
Así que, puedo hacer dentro aquí.
Puedo decir feedbackForm.Value y canalizado a través de json para mostrar aquí.
Del mismo modo, puedo hacer aquí, FeedbackForm.
Hay otra propiedad asociada con ese modelo de formulario llamado status,
que me muestra el estado del formulario en este momento,
si es válido o no válido.
Entonces, voy a agregar estos dos en mi formulario aquí,
para que esto se muestre en mi plantilla.
Esto es solo para darle una vista instantánea de lo que
contiene el modelo de formulario en mi archivo de script de tipo.
Guardemos los cambios y vayamos y echemos un vistazo rápido a nuestro formulario.
Volviendo a nuestro navegador,
ahora puede ver que los valores del formulario se muestran
aquí y el formulario está en buena forma para permitirnos escribir los valores.
Así que vamos a escribir algunos valores aleatorios aquí y usted puede
inmediatamente ver el valor se está reflejando en el modelo de FeedbackForm allí,
justo en la parte superior y el correo electrónico.
no importa, simplemente escribe algo.
Entonces, este interruptor de alternancia,
puedes ver que cuando lo enciendes y lo desactiva,
el cambio de acuerdo cambia de falso a verdadero.
Así que déjame dejarlo en verdadero y luego seleccionar.
Permítanme seleccionar el correo electrónico y luego verá que el tipo de contacto aquí ha cambiado a correo electrónico.
Por lo tanto, así es como seleccionaría cambiar el valor.
Por lo tanto, digamos correo electrónico y luego aquí,
podemos escribir el mensaje.
Un poco de texto aleatorio aquí y usted sería
capaz de ver que el texto aleatorio se refleja en el mensaje allí.
Enviemos el formulario.
Entonces, cuando haces clic en el Enviar inmediatamente ves en la consola,
el valor que se imprime aquí,
en este objeto aquí.
Así que puede navegar para ver todas las propiedades de ese objeto,
el modelo de formulario de retroalimentación.
Por lo tanto, esta es una ilustración de una forma reactiva dentro de nuestra aplicación.
Esto completa este ejercicio.
En este ejercicio, hemos visto cómo podemos crear
una forma reactiva dentro de nuestra aplicación Angular.
Este es también un buen punto en el que puedes hacer una confirmación de Git con el mensaje,
reactiva forma la parte uno.