Acabamos de aprender sobre el soporte angular para formularios,
y en particular, la forma basada en plantillas.
En este ejercicio, crearemos un formulario basado en plantillas y luego incluiremos ese
en nuestro diálogo de componentes de inicio de sesión que creamos en el ejercicio anterior.
En esta conferencia el formulario basado en plantillas que creamos,
permite al usuario escribir su nombre de usuario y contraseña en el formulario de inicio de sesión,
y luego enviar esta información a nuestra solicitud.
Ahora, cómo esta información es procesada por el lado del servidor,
que se deja a un curso posterior.
Pero por el momento, tenemos una forma de capturar el nombre de usuario y contraseña
enviados por el usuario a través del formulario de inicio de sesión impulsado por plantillas,
que diseñaremos en este ejercicio.
Procediendo con el ejercicio,
el primer paso para poder aprovechar el uso
de formularios basados en plantillas es ir al archivo app module.ts
y luego importar algunos módulos de soporte para nuestra aplicación.
Entonces, lo primero que voy a importar es
el MatFormFieldModule de Angular
campo de formulario de material.
Por lo tanto, esto nos permite agrupar un montón de elementos en un campo de formulario allí.
A continuación, también importaremos el MatInputModule.
El módulo de entrada admite el componente de entrada que es
un componente estilizado Material angular
que admite el campo de formulario de entrada de formularios HTML aquí.
Entonces, también, permítanme importar un MatCheckBox,
el módulo correspondiente de la casilla de verificación Material angular.
Por lo tanto, estos tres admiten
tres elementos de forma que vamos a utilizar cuando creamos nuestra aplicación.
El módulo de campo de formulario nos permite agrupar un montón de elementos de formulario allí.
El módulo de entrada nos permite crear un campo de entrada allí.
El módulo de casillas de verificación, como es de esperar,
nos permite crear una casilla de verificación.
Además, también necesito importar
el FormsModule de formularios Angular.
El FormsModule es el que soporta formularios en Angular.
Este es el que admite formas controladas por plantillas.
Así que, ahora que hemos importado estos, obviamente,
el siguiente paso es ir al decorador ngModule y luego colocarlos en su lugar aquí.
Entonces, entraremos aquí y luego ingresaremos el FormsModule.
Permítanme ingresar el FormFieldModule,
el InputModule, el CheckBoxModule aquí.
Entonces, ahora mi módulo de aplicación está listo
para admitir el uso de formularios basados en plantillas en nuestra aplicación.
Ahora que hemos completado esto,
vamos al componente de inicio de sesión.
Gran parte de nuestro trabajo está en el componente de inicio de sesión.
Permítanme diseñar primero el formulario.
Así que, entrando en el archivo de plantilla de componente de inicio de sesión,
permítanme agregar la plantilla para nuestro formulario para crear el formulario aquí.
Así que, en la parte superior,
crearé un p
que mostrará la información que escribí en el formulario.
En el código, tendremos una variable JavaScript llamada usuario,
que estará vinculada a los campos en este formulario.
Ahora, cuando creamos eso,
entonces será más claro.
Ahora, aquí, al incluir esto,
lo que estoy habilitando es mostrar los cambios.
A medida que escribimos información en el formulario,
los cambios correspondientes que ocurren en el código a
reflejan el estado del formulario se pueden mostrar allí mismo.
Ahora, además, ahora voy a crear el formulario aquí.
Por lo tanto, vamos a entrar y luego añadir el elemento de formulario aquí.
A este elemento de formulario,
voy a aplicar
el atributo novalidate aquí porque
queremos que la validación del formulario sea atendida por Angular y no
por la validación del formulario HTML estándar
que soporte del navegador.
Por lo tanto, vamos a cambiar esa responsabilidad a nuestra propia aplicación Angular.
Entonces, es por eso que especifico el atributo novalidate para mi teléfono.
Entonces, eso crea mi forma aquí.
Dentro de aquí, voy a usar el mat-dialog-content.
Ahora, el mat-dialog-content, como cabría esperar,
es un área que contiene el contenido del diálogo en sí.
Entonces, es por eso que ponemos ese mat-dialog-content aquí.
Entonces, aquí, voy a crear mi formulario aquí.
Así que, puse una p allí.
Dentro de ese p, usaré un campo de forma mat-form-campo aquí.
Entonces, el campo mat-form-field me permite agrupar un conjunto
de elementos relacionados con el formulario que utilizo juntos.
Así que, aquí, voy a poner en la entrada aquí.
Por lo tanto, el campo de formulario de entrada de formularios de archivo HTML.
Entonces, a esto, aplicaré el atributo matInput
que nos permitirá aplicar el estilo de diseño de materiales para esta entrada.
Entonces, daremos un marcador de posición para esto como nombre de usuario,
y como cabría esperar,
y el tipo será tipo de texto aquí.
Permítanme añadir en el NGModel.
Por lo tanto, un formulario controlado por plantilla es compatible a través del atributo ngModel aquí.
Entonces, con el ngModel.
Por lo tanto, puede ver la forma de bandeja de entrada de plátano de declarar esto.
Entonces, diremos user.username.
Entonces, este usuario va a ser un objeto JavaScript en mi archivo TypeScript,
que contendrá una propiedad de nombre de usuario allí,
que rastreará el valor que ingresó en este campo de entrada en mi formulario allí.
Entonces, es por eso que estamos vinculando esta información de campo de entrada a este objeto JavaScript.
Entonces, este es el enlace de datos bidireccional que estamos haciendo
entre el elemento de formulario y el código JavaScript correspondiente.
Entonces, le daremos un nombre como nombre de usuario aquí.
Entonces, esos son mis primeros campos de formulario que he agregado aquí.
Ahora, de manera similar, agregaré en el segundo campo de formulario para la contraseña.
Entonces, para eso, déjame copiar esto y luego pegarlo aquí abajo.
Entonces, el segundo campo sería Entrada, MatInput,
marcador de posición es contraseña,
y luego el tipo es contraseña.
Por lo tanto, el elemento de entrada de contraseña del soporte del formulario HTML5.
El propio ngModel estará vinculado a la contraseña de usuario y el nombre sería contraseña.
Por lo tanto, verá que el objeto JavaScript de usuario ahora contiene dos propiedades,
nombre de usuario y contraseña, que rastrearán las credenciales del usuario aquí.
Por lo tanto, estos dos campos de formulario dentro de este p aquí,
y luego también vamos a añadir en uno
más llamado como mat-checkbox.
Usted vio que habíamos incluido el módulo de casillas de verificación antes.
Por lo tanto, vamos a añadir en esto.
Ahora, esta casilla de verificación que cuando se marca informará a
mi aplicación Angular que el nombre de usuario y la contraseña deben guardarse en la aplicación.
Entonces, permítanme vincular esto con el modelo NG a
una propiedad correspondiente llamada recordar en el objeto de usuario.
Por lo tanto, esto será,
esta propiedad será verdadera o falsa dependiendo de
si la casilla de verificación está marcada o no marcada.
Así que, esa es la forma en que rastreamos.
Entonces, estamos haciendo el enlace de datos bidireccional entre esta casilla de verificación y
esta propiedad llamada recordar del objeto JavaScript del usuario en mi código allí.
Entonces el nombre sería recordar,
y luego vamos a dar esta una etiqueta como recordarme.
Entonces, cuando el usuario compruebe esto,
entonces la información del usuario será recordada aquí.
Por lo tanto, esa es la casilla de verificación mate-que hemos añadido.
Así que, tenemos tres campos aquí,
el nombre de usuario, la contraseña,
y luego una casilla de verificación aquí en mi formulario aquí.
Por lo tanto, este es un contenido de diálogo mate-mate aquí.
Ahora, además del contenido mat-dialogue,
también puedo añadir acciones mat-dialogue aquí.
Ahora, las acciones de diálogo pueden contener los botones que corresponden a este diálogo.
Entonces, esto es lo que actuará como botones de acción en el diálogo,
y también como están encerrados dentro del formulario,
estos botones también actuarán como botones de envío de formularios para mí.
Así que, aquí, déjame hacer un espaciador flex de clase span,
y luego déjame agregar un botón,
mat-button, y luego este botón,
también convertiré eso en un botón de cierre de diálogo mate.
Entonces, este sería un botón de cancelación que incluiré en mi formulario aquí,
luego se hace clic en el diálogo será rechazado,
y esencialmente lo que significa que no está enviando el formulario allí.
Entonces, eso también actúa como el botón de cancelar para el formulario,
y luego también descartando el diálogo al mismo tiempo.
Entonces, al usar este atributo para este botón,
estamos declarando esto como el botón que descarta la falla,
de la misma manera que tenemos este botón en la barra de herramientas.
Entonces, el diálogo mate se cierra allí.
Entonces otro botón que tendremos es
para enviar para que
este tipo de botón sea el botón enviar dentro de un formulario allí.
Entonces, cuando se hace clic en esto,
que desencadena el envío del formulario para este formulario aquí,
y luego déjame agregar una clase a esto,
vamos a decir fondo primario, y texto floral.
Estas clases ya he agregado en mi archivo Styles.acss allí.
Entonces, texto floral blanco,
y este botón se etiquetaría como el botón de inicio de sesión allí.
Por lo tanto, este sería un botón de color azul que se mostrará en la pantalla allí.
Entonces, con esto, mi estructura de formulario se crea en la plantilla allí.
Ahora, el siguiente paso es entrar en el código y luego manejar el envío del formulario en sí.
Así que, ahora vamos a iniciar sesión component.ts archivo,
tenemos que manejar el envío del formulario aquí.
Ahora, el primer paso que voy a hacer es cuando se crea este componente de inicio de sesión,
vamos a crear un objeto de usuario aquí con las propiedades nombre de usuario,
que sería una cadena vacía para comenzar,
contraseña que también será una cadena vacía para empezar,
y luego recordar cuál es falsa.
Ahora, declarando esto aquí,
también estamos diciendo que ahora podemos vincular
estas tres propiedades a los tres elementos de forma en mi plantilla.
Así que, eso es lo que hemos terminado logrando aquí.
Para el constructor, deje que
me inyecte el diálogo ref aquí,
mat-dialogue ref, y este diálogo mat ref tomará el componente correspondiente.
Entonces, esta es una referencia a este componente de inicio de sesión aquí.
Entonces, eso nos dice cuando esto- cuando esto se envía,
cómo manejar esto.
Así que, aquí, permítanme agregar una función de envío aquí,
y dentro de la función de envío,
Voy a simplemente iniciar sesión,
registrar la información correspondiente de los usuarios,
así que luego el usuario hace clic en el formulario de inicio de sesión,
el formulario de inicio de sesión y envía el formulario de inicio de sesión.
Solo voy a registrar la información del usuario en la consola en este momento.
Más adelante, diseñaremos en el curso del lado del servidor.
Vamos a manejar el proceso de inicio de sesión real cuando
nuestro servidor esté listo y sea capaz de manejar el inicio de sesión del usuario.
Así que, después de esto, vamos a decir que este diálogo ref cerrar.
Ahora, ¿por qué incluimos esto aquí?
Así que, cuando se envíe el formulario,
también queremos descartar el componente allí,
el componente de diálogo allí.
Así que, llamando a esto,
este diálogo ref cerrar,
estamos pidiendo que el componente de diálogo se cierre aquí.
Entonces, esa es la razón por la que obtengo una referencia al componente de inicio de sesión aquí,
que está actuando como mi componente de diálogo aquí.
Por lo tanto, podremos cerrar el componente de diálogo haciendo esto.
Por lo tanto, una vez que el usuario envíe el formulario,
registrará la información del usuario,
y luego cerrará el cuadro de diálogo. Eso es todo.
Vamos a guardar los cambios y luego ir a echar un vistazo a la aplicación actualizada.
Entra en nuestra aplicación en el navegador,
déjame abrir la consola JavaScript para que puedas ver la información que se está registrando.
Déjame abrir el diálogo de inicio de sesión aquí con el formulario ya en su lugar,
el nombre de usuario y contraseña ya en su lugar.
Entonces, déjame escribir el nombre de un usuario.
Estoy siendo narcisista aquí.
Entonces, estoy escribiendo el nombre de usuario y la contraseña aquí.
Ahora, observe que mientras escribo la información aquí,
ya que estoy mostrando el valor del objeto JavaScript del usuario aquí,
cualquier cambio que realice se refleja inmediatamente en la pantalla aquí.
También la casilla de verificación recordar que está marcada y desactivada aquí.
Luego, cuando envío el formulario aquí,
puedes ver que en la consola,
la información del usuario se registra en la consola,
el nombre de usuario, la contraseña,
y el valor de recordar está bloqueado en la consola.
Por lo tanto, ahora puede ver que mi formulario de inicio de sesión,
el formulario impulsado por la plantilla está funcionando correctamente.
Con esto, completamos este ejercicio,
donde hemos visto cómo podemos diseñar un formulario impulsado por plantillas en nuestra aplicación Angular.
Este es un buen momento para que hagas un Git Commit con el mensaje,
Formularios controlados por plantillas Parte 1.