1
00:00:03,890 --> 00:00:09,395
Acabamos de aprender sobre el soporte angular para formularios,

2
00:00:09,395 --> 00:00:12,125
y en particular, la forma basada en plantillas.

3
00:00:12,125 --> 00:00:17,520
En este ejercicio, crearemos un formulario basado en plantillas y luego incluiremos ese

4
00:00:17,520 --> 00:00:23,375
en nuestro diálogo de componentes de inicio de sesión que creamos en el ejercicio anterior.

5
00:00:23,375 --> 00:00:29,580
En esta conferencia el formulario basado en plantillas que creamos,

6
00:00:29,580 --> 00:00:34,850
permite al usuario escribir su nombre de usuario y contraseña en el formulario de inicio de sesión,

7
00:00:34,850 --> 00:00:37,700
y luego enviar esta información a nuestra solicitud.

8
00:00:37,700 --> 00:00:41,825
Ahora, cómo esta información es procesada por el lado del servidor,

9
00:00:41,825 --> 00:00:44,990
que se deja a un curso posterior.

10
00:00:44,990 --> 00:00:49,310
Pero por el momento, tenemos una forma de capturar el nombre de usuario y contraseña

11
00:00:49,310 --> 00:00:54,285
enviados por el usuario a través del formulario de inicio de sesión impulsado por plantillas,

12
00:00:54,285 --> 00:00:58,210
que diseñaremos en este ejercicio.

13
00:00:58,210 --> 00:01:01,115
Procediendo con el ejercicio,

14
00:01:01,115 --> 00:01:05,030
el primer paso para poder aprovechar el uso

15
00:01:05,030 --> 00:01:08,890
de formularios basados en plantillas es ir al archivo app module.ts

16
00:01:08,890 --> 00:01:17,140
y luego importar algunos módulos de soporte para nuestra aplicación.

17
00:01:17,140 --> 00:01:20,764
Entonces, lo primero que voy a importar es

18
00:01:20,764 --> 00:01:33,155
el MatFormFieldModule de Angular

19
00:01:33,155 --> 00:01:38,085
campo de formulario de material.

20
00:01:38,085 --> 00:01:44,600
Por lo tanto, esto nos permite agrupar un montón de elementos en un campo de formulario allí.

21
00:01:44,600 --> 00:01:52,190
A continuación, también importaremos el MatInputModule.

22
00:01:52,190 --> 00:01:58,100
El módulo de entrada admite el componente de entrada que es

23
00:01:58,100 --> 00:02:03,650
un componente estilizado Material angular

24
00:02:03,650 --> 00:02:09,690
que admite el campo de formulario de entrada de formularios HTML aquí.

25
00:02:09,690 --> 00:02:15,520
Entonces, también, permítanme importar un MatCheckBox,

26
00:02:18,680 --> 00:02:29,895
el módulo correspondiente de la casilla de verificación Material angular.

27
00:02:29,895 --> 00:02:32,690
Por lo tanto, estos tres admiten

28
00:02:32,690 --> 00:02:36,410
tres elementos de forma que vamos a utilizar cuando creamos nuestra aplicación.

29
00:02:36,410 --> 00:02:42,420
El módulo de campo de formulario nos permite agrupar un montón de elementos de formulario allí.

30
00:02:42,420 --> 00:02:46,240
El módulo de entrada nos permite crear un campo de entrada allí.

31
00:02:46,240 --> 00:02:48,460
El módulo de casillas de verificación, como es de esperar,

32
00:02:48,460 --> 00:02:50,570
nos permite crear una casilla de verificación.

33
00:02:50,570 --> 00:02:53,670
Además, también necesito importar

34
00:02:53,670 --> 00:03:06,190
el FormsModule de formularios Angular.

35
00:03:06,190 --> 00:03:10,130
El FormsModule es el que soporta formularios en Angular.

36
00:03:10,130 --> 00:03:12,445
Este es el que admite formas controladas por plantillas.

37
00:03:12,445 --> 00:03:15,280
Así que, ahora que hemos importado estos, obviamente,

38
00:03:15,280 --> 00:03:23,775
el siguiente paso es ir al decorador ngModule y luego colocarlos en su lugar aquí.

39
00:03:23,775 --> 00:03:30,560
Entonces, entraremos aquí y luego ingresaremos el FormsModule.

40
00:03:30,660 --> 00:03:38,200
Permítanme ingresar el FormFieldModule,

41
00:03:38,200 --> 00:03:45,075
el InputModule, el CheckBoxModule aquí.

42
00:03:45,075 --> 00:03:49,325
Entonces, ahora mi módulo de aplicación está listo

43
00:03:49,325 --> 00:03:55,125
para admitir el uso de formularios basados en plantillas en nuestra aplicación.

44
00:03:55,125 --> 00:03:57,485
Ahora que hemos completado esto,

45
00:03:57,485 --> 00:03:59,530
vamos al componente de inicio de sesión.

46
00:03:59,530 --> 00:04:02,320
Gran parte de nuestro trabajo está en el componente de inicio de sesión.

47
00:04:02,320 --> 00:04:04,090
Permítanme diseñar primero el formulario.

48
00:04:04,090 --> 00:04:07,975
Así que, entrando en el archivo de plantilla de componente de inicio de sesión,

49
00:04:07,975 --> 00:04:14,345
permítanme agregar la plantilla para nuestro formulario para crear el formulario aquí.

50
00:04:14,345 --> 00:04:16,190
Así que, en la parte superior,

51
00:04:16,190 --> 00:04:25,940
crearé un p

52
00:04:25,940 --> 00:04:30,715
que mostrará la información que escribí en el formulario.

53
00:04:30,715 --> 00:04:36,750
En el código, tendremos una variable JavaScript llamada usuario,

54
00:04:36,750 --> 00:04:41,175
que estará vinculada a los campos en este formulario.

55
00:04:41,175 --> 00:04:42,500
Ahora, cuando creamos eso,

56
00:04:42,500 --> 00:04:43,690
entonces será más claro.

57
00:04:43,690 --> 00:04:45,490
Ahora, aquí, al incluir esto,

58
00:04:45,490 --> 00:04:50,100
lo que estoy habilitando es mostrar los cambios.

59
00:04:50,100 --> 00:04:52,990
A medida que escribimos información en el formulario,

60
00:04:52,990 --> 00:04:56,390
los cambios correspondientes que ocurren en el código a

61
00:04:56,390 --> 00:05:00,880
reflejan el estado del formulario se pueden mostrar allí mismo.

62
00:05:00,880 --> 00:05:04,500
Ahora, además, ahora voy a crear el formulario aquí.

63
00:05:04,500 --> 00:05:07,210
Por lo tanto, vamos a entrar y luego añadir el elemento de formulario aquí.

64
00:05:07,210 --> 00:05:09,470
A este elemento de formulario,

65
00:05:09,470 --> 00:05:11,000
voy a aplicar

66
00:05:11,000 --> 00:05:15,260
el atributo novalidate aquí porque

67
00:05:15,260 --> 00:05:19,625
queremos que la validación del formulario sea atendida por Angular y no

68
00:05:19,625 --> 00:05:28,820
por la validación del formulario HTML estándar

69
00:05:28,820 --> 00:05:30,230
que soporte del navegador.

70
00:05:30,230 --> 00:05:38,810
Por lo tanto, vamos a cambiar esa responsabilidad a nuestra propia aplicación Angular.

71
00:05:38,810 --> 00:05:44,800
Entonces, es por eso que especifico el atributo novalidate para mi teléfono.

72
00:05:44,800 --> 00:05:47,310
Entonces, eso crea mi forma aquí.

73
00:05:47,310 --> 00:05:53,720
Dentro de aquí, voy a usar el mat-dialog-content.

74
00:05:53,790 --> 00:05:58,360
Ahora, el mat-dialog-content, como cabría esperar,

75
00:05:58,360 --> 00:06:03,740
es un área que contiene el contenido del diálogo en sí.

76
00:06:03,740 --> 00:06:06,970
Entonces, es por eso que ponemos ese mat-dialog-content aquí.

77
00:06:06,970 --> 00:06:14,265
Entonces, aquí, voy a crear mi formulario aquí.

78
00:06:14,265 --> 00:06:16,675
Así que, puse una p allí.

79
00:06:16,675 --> 00:06:23,915
Dentro de ese p, usaré un campo de forma mat-form-campo aquí.

80
00:06:23,915 --> 00:06:28,805
Entonces, el campo mat-form-field me permite agrupar un conjunto

81
00:06:28,805 --> 00:06:33,845
de elementos relacionados con el formulario que utilizo juntos.

82
00:06:33,845 --> 00:06:39,765
Así que, aquí, voy a poner en la entrada aquí.

83
00:06:39,765 --> 00:06:44,505
Por lo tanto, el campo de formulario de entrada de formularios de archivo HTML.

84
00:06:44,505 --> 00:06:50,255
Entonces, a esto, aplicaré el atributo matInput

85
00:06:50,255 --> 00:06:57,360
que nos permitirá aplicar el estilo de diseño de materiales para esta entrada.

86
00:06:57,360 --> 00:07:04,635
Entonces, daremos un marcador de posición para esto como nombre de usuario,

87
00:07:04,635 --> 00:07:06,569
y como cabría esperar,

88
00:07:06,569 --> 00:07:12,220
y el tipo será tipo de texto aquí.

89
00:07:15,140 --> 00:07:19,830
Permítanme añadir en el NGModel.

90
00:07:19,830 --> 00:07:30,000
Por lo tanto, un formulario controlado por plantilla es compatible a través del atributo ngModel aquí.

91
00:07:30,000 --> 00:07:31,520
Entonces, con el ngModel.

92
00:07:31,520 --> 00:07:36,130
Por lo tanto, puede ver la forma de bandeja de entrada de plátano de declarar esto.

93
00:07:36,130 --> 00:07:40,270
Entonces, diremos user.username.

94
00:07:40,270 --> 00:07:48,345
Entonces, este usuario va a ser un objeto JavaScript en mi archivo TypeScript,

95
00:07:48,345 --> 00:07:52,440
que contendrá una propiedad de nombre de usuario allí,

96
00:07:52,440 --> 00:07:58,540
que rastreará el valor que ingresó en este campo de entrada en mi formulario allí.

97
00:07:58,540 --> 00:08:06,320
Entonces, es por eso que estamos vinculando esta información de campo de entrada a este objeto JavaScript.

98
00:08:06,320 --> 00:08:08,890
Entonces, este es el enlace de datos bidireccional que estamos haciendo

99
00:08:08,890 --> 00:08:13,250
entre el elemento de formulario y el código JavaScript correspondiente.

100
00:08:13,250 --> 00:08:19,640
Entonces, le daremos un nombre como nombre de usuario aquí.

101
00:08:19,640 --> 00:08:24,495
Entonces, esos son mis primeros campos de formulario que he agregado aquí.

102
00:08:24,495 --> 00:08:29,330
Ahora, de manera similar, agregaré en el segundo campo de formulario para la contraseña.

103
00:08:29,330 --> 00:08:36,255
Entonces, para eso, déjame copiar esto y luego pegarlo aquí abajo.

104
00:08:36,255 --> 00:08:41,820
Entonces, el segundo campo sería Entrada, MatInput,

105
00:08:41,820 --> 00:08:47,760
marcador de posición es contraseña,

106
00:08:47,760 --> 00:08:52,360
y luego el tipo es contraseña.

107
00:08:52,360 --> 00:09:01,385
Por lo tanto, el elemento de entrada de contraseña del soporte del formulario HTML5.

108
00:09:01,385 --> 00:09:11,050
El propio ngModel estará vinculado a la contraseña de usuario y el nombre sería contraseña.

109
00:09:11,050 --> 00:09:16,335
Por lo tanto, verá que el objeto JavaScript de usuario ahora contiene dos propiedades,

110
00:09:16,335 --> 00:09:20,700
nombre de usuario y contraseña, que rastrearán las credenciales del usuario aquí.

111
00:09:20,700 --> 00:09:24,995
Por lo tanto, estos dos campos de formulario dentro de este p aquí,

112
00:09:24,995 --> 00:09:27,740
y luego también vamos a añadir en uno

113
00:09:27,740 --> 00:09:35,795
más llamado como mat-checkbox.

114
00:09:35,795 --> 00:09:41,050
Usted vio que habíamos incluido el módulo de casillas de verificación antes.

115
00:09:41,050 --> 00:09:43,290
Por lo tanto, vamos a añadir en esto.

116
00:09:43,290 --> 00:09:48,735
Ahora, esta casilla de verificación que cuando se marca informará a

117
00:09:48,735 --> 00:09:55,990
mi aplicación Angular que el nombre de usuario y la contraseña deben guardarse en la aplicación.

118
00:09:55,990 --> 00:10:01,220
Entonces, permítanme vincular esto con el modelo NG a

119
00:10:01,220 --> 00:10:09,730
una propiedad correspondiente llamada recordar en el objeto de usuario.

120
00:10:09,730 --> 00:10:11,060
Por lo tanto, esto será,

121
00:10:11,060 --> 00:10:14,020
esta propiedad será verdadera o falsa dependiendo de

122
00:10:14,020 --> 00:10:17,315
si la casilla de verificación está marcada o no marcada.

123
00:10:17,315 --> 00:10:19,830
Así que, esa es la forma en que rastreamos.

124
00:10:19,830 --> 00:10:24,795
Entonces, estamos haciendo el enlace de datos bidireccional entre esta casilla de verificación y

125
00:10:24,795 --> 00:10:32,330
esta propiedad llamada recordar del objeto JavaScript del usuario en mi código allí.

126
00:10:32,330 --> 00:10:36,260
Entonces el nombre sería recordar,

127
00:10:36,260 --> 00:10:43,590
y luego vamos a dar esta una etiqueta como recordarme.

128
00:10:43,850 --> 00:10:46,620
Entonces, cuando el usuario compruebe esto,

129
00:10:46,620 --> 00:10:50,200
entonces la información del usuario será recordada aquí.

130
00:10:50,200 --> 00:10:52,410
Por lo tanto, esa es la casilla de verificación mate-que hemos añadido.

131
00:10:52,410 --> 00:10:54,270
Así que, tenemos tres campos aquí,

132
00:10:54,270 --> 00:10:56,585
el nombre de usuario, la contraseña,

133
00:10:56,585 --> 00:11:02,880
y luego una casilla de verificación aquí en mi formulario aquí.

134
00:11:02,880 --> 00:11:06,090
Por lo tanto, este es un contenido de diálogo mate-mate aquí.

135
00:11:06,090 --> 00:11:08,800
Ahora, además del contenido mat-dialogue,

136
00:11:08,800 --> 00:11:14,985
también puedo añadir acciones mat-dialogue aquí.

137
00:11:14,985 --> 00:11:23,820
Ahora, las acciones de diálogo pueden contener los botones que corresponden a este diálogo.

138
00:11:23,820 --> 00:11:28,145
Entonces, esto es lo que actuará como botones de acción en el diálogo,

139
00:11:28,145 --> 00:11:32,210
y también como están encerrados dentro del formulario,

140
00:11:32,210 --> 00:11:36,485
estos botones también actuarán como botones de envío de formularios para mí.

141
00:11:36,485 --> 00:11:44,530
Así que, aquí, déjame hacer un espaciador flex de clase span,

142
00:11:46,580 --> 00:11:52,670
y luego déjame agregar un botón,

143
00:11:55,950 --> 00:12:02,140
mat-button, y luego este botón,

144
00:12:02,140 --> 00:12:07,090
también convertiré eso en un botón de cierre de diálogo mate.

145
00:12:07,090 --> 00:12:12,115
Entonces, este sería un botón de cancelación que incluiré en mi formulario aquí,

146
00:12:12,115 --> 00:12:14,925
luego se hace clic en el diálogo será rechazado,

147
00:12:14,925 --> 00:12:17,960
y esencialmente lo que significa que no está enviando el formulario allí.

148
00:12:17,960 --> 00:12:20,505
Entonces, eso también actúa como el botón de cancelar para el formulario,

149
00:12:20,505 --> 00:12:23,595
y luego también descartando el diálogo al mismo tiempo.

150
00:12:23,595 --> 00:12:27,180
Entonces, al usar este atributo para este botón,

151
00:12:27,180 --> 00:12:31,595
estamos declarando esto como el botón que descarta la falla,

152
00:12:31,595 --> 00:12:36,940
de la misma manera que tenemos este botón en la barra de herramientas.

153
00:12:36,940 --> 00:12:38,990
Entonces, el diálogo mate se cierra allí.

154
00:12:38,990 --> 00:12:42,470
Entonces otro botón que tendremos es

155
00:12:42,470 --> 00:12:49,490
para enviar para que

156
00:12:49,490 --> 00:12:55,030
este tipo de botón sea el botón enviar dentro de un formulario allí.

157
00:12:55,030 --> 00:12:56,315
Entonces, cuando se hace clic en esto,

158
00:12:56,315 --> 00:13:01,495
que desencadena el envío del formulario para este formulario aquí,

159
00:13:01,495 --> 00:13:06,420
y luego déjame agregar una clase a esto,

160
00:13:06,420 --> 00:13:13,795
vamos a decir fondo primario, y texto floral.

161
00:13:13,795 --> 00:13:19,345
Estas clases ya he agregado en mi archivo Styles.acss allí.

162
00:13:19,345 --> 00:13:24,800
Entonces, texto floral blanco,

163
00:13:24,800 --> 00:13:31,620
y este botón se etiquetaría como el botón de inicio de sesión allí.

164
00:13:31,620 --> 00:13:36,090
Por lo tanto, este sería un botón de color azul que se mostrará en la pantalla allí.

165
00:13:36,090 --> 00:13:43,275
Entonces, con esto, mi estructura de formulario se crea en la plantilla allí.

166
00:13:43,275 --> 00:13:49,355
Ahora, el siguiente paso es entrar en el código y luego manejar el envío del formulario en sí.

167
00:13:49,355 --> 00:13:54,070
Así que, ahora vamos a iniciar sesión component.ts archivo,

168
00:13:54,070 --> 00:13:57,400
tenemos que manejar el envío del formulario aquí.

169
00:13:57,400 --> 00:14:02,070
Ahora, el primer paso que voy a hacer es cuando se crea este componente de inicio de sesión,

170
00:14:02,070 --> 00:14:12,110
vamos a crear un objeto de usuario aquí con las propiedades nombre de usuario,

171
00:14:12,110 --> 00:14:16,550
que sería una cadena vacía para comenzar,

172
00:14:16,610 --> 00:14:22,570
contraseña que también será una cadena vacía para empezar,

173
00:14:22,570 --> 00:14:27,050
y luego recordar cuál es falsa.

174
00:14:27,050 --> 00:14:29,640
Ahora, declarando esto aquí,

175
00:14:29,640 --> 00:14:33,530
también estamos diciendo que ahora podemos vincular

176
00:14:33,530 --> 00:14:40,210
estas tres propiedades a los tres elementos de forma en mi plantilla.

177
00:14:40,210 --> 00:14:43,920
Así que, eso es lo que hemos terminado logrando aquí.

178
00:14:43,920 --> 00:14:46,440
Para el constructor, deje que

179
00:14:46,440 --> 00:14:55,640
me inyecte el diálogo ref aquí,

180
00:14:55,880 --> 00:15:05,410
mat-dialogue ref, y este diálogo mat ref tomará el componente correspondiente.

181
00:15:05,410 --> 00:15:08,755
Entonces, esta es una referencia a este componente de inicio de sesión aquí.

182
00:15:08,755 --> 00:15:11,990
Entonces, eso nos dice cuando esto- cuando esto se envía,

183
00:15:11,990 --> 00:15:14,060
cómo manejar esto.

184
00:15:14,060 --> 00:15:21,985
Así que, aquí, permítanme agregar una función de envío aquí,

185
00:15:21,985 --> 00:15:24,155
y dentro de la función de envío,

186
00:15:24,155 --> 00:15:27,935
Voy a simplemente iniciar sesión,

187
00:15:27,935 --> 00:15:32,145
registrar la información correspondiente de los usuarios,

188
00:15:32,145 --> 00:15:35,690
así que luego el usuario hace clic en el formulario de inicio de sesión,

189
00:15:35,690 --> 00:15:39,430
el formulario de inicio de sesión y envía el formulario de inicio de sesión.

190
00:15:39,430 --> 00:15:44,585
Solo voy a registrar la información del usuario en la consola en este momento.

191
00:15:44,585 --> 00:15:49,150
Más adelante, diseñaremos en el curso del lado del servidor.

192
00:15:49,150 --> 00:15:52,310
Vamos a manejar el proceso de inicio de sesión real cuando

193
00:15:52,310 --> 00:15:57,280
nuestro servidor esté listo y sea capaz de manejar el inicio de sesión del usuario.

194
00:15:57,280 --> 00:16:03,710
Así que, después de esto, vamos a decir que este diálogo ref cerrar.

195
00:16:03,710 --> 00:16:06,255
Ahora, ¿por qué incluimos esto aquí?

196
00:16:06,255 --> 00:16:08,105
Así que, cuando se envíe el formulario,

197
00:16:08,105 --> 00:16:13,960
también queremos descartar el componente allí,

198
00:16:13,960 --> 00:16:15,190
el componente de diálogo allí.

199
00:16:15,190 --> 00:16:16,800
Así que, llamando a esto,

200
00:16:16,800 --> 00:16:19,120
este diálogo ref cerrar,

201
00:16:19,120 --> 00:16:23,620
estamos pidiendo que el componente de diálogo se cierre aquí.

202
00:16:23,620 --> 00:16:29,650
Entonces, esa es la razón por la que obtengo una referencia al componente de inicio de sesión aquí,

203
00:16:29,650 --> 00:16:33,655
que está actuando como mi componente de diálogo aquí.

204
00:16:33,655 --> 00:16:37,445
Por lo tanto, podremos cerrar el componente de diálogo haciendo esto.

205
00:16:37,445 --> 00:16:39,350
Por lo tanto, una vez que el usuario envíe el formulario,

206
00:16:39,350 --> 00:16:41,440
registrará la información del usuario,

207
00:16:41,440 --> 00:16:46,415
y luego cerrará el cuadro de diálogo. Eso es todo.

208
00:16:46,415 --> 00:16:51,640
Vamos a guardar los cambios y luego ir a echar un vistazo a la aplicación actualizada.

209
00:16:51,640 --> 00:16:54,590
Entra en nuestra aplicación en el navegador,

210
00:16:54,590 --> 00:17:02,900
déjame abrir la consola JavaScript para que puedas ver la información que se está registrando.

211
00:17:02,900 --> 00:17:09,890
Déjame abrir el diálogo de inicio de sesión aquí con el formulario ya en su lugar,

212
00:17:09,890 --> 00:17:12,425
el nombre de usuario y contraseña ya en su lugar.

213
00:17:12,425 --> 00:17:15,820
Entonces, déjame escribir el nombre de un usuario.

214
00:17:15,820 --> 00:17:19,165
Estoy siendo narcisista aquí.

215
00:17:19,165 --> 00:17:22,710
Entonces, estoy escribiendo el nombre de usuario y la contraseña aquí.

216
00:17:22,710 --> 00:17:26,495
Ahora, observe que mientras escribo la información aquí,

217
00:17:26,495 --> 00:17:33,570
ya que estoy mostrando el valor del objeto JavaScript del usuario aquí,

218
00:17:33,570 --> 00:17:42,775
cualquier cambio que realice se refleja inmediatamente en la pantalla aquí.

219
00:17:42,775 --> 00:17:50,110
También la casilla de verificación recordar que está marcada y desactivada aquí.

220
00:17:50,110 --> 00:17:53,360
Luego, cuando envío el formulario aquí,

221
00:17:53,360 --> 00:17:56,040
puedes ver que en la consola,

222
00:17:56,040 --> 00:17:59,350
la información del usuario se registra en la consola,

223
00:17:59,350 --> 00:18:00,595
el nombre de usuario, la contraseña,

224
00:18:00,595 --> 00:18:03,440
y el valor de recordar está bloqueado en la consola.

225
00:18:03,440 --> 00:18:06,170
Por lo tanto, ahora puede ver que mi formulario de inicio de sesión,

226
00:18:06,170 --> 00:18:09,275
el formulario impulsado por la plantilla está funcionando correctamente.

227
00:18:09,275 --> 00:18:12,305
Con esto, completamos este ejercicio,

228
00:18:12,305 --> 00:18:18,965
donde hemos visto cómo podemos diseñar un formulario impulsado por plantillas en nuestra aplicación Angular.

229
00:18:18,965 --> 00:18:22,870
Este es un buen momento para que hagas un Git Commit con el mensaje,

230
00:18:22,870 --> 00:18:26,000
Formularios controlados por plantillas Parte 1.