1
00:00:03,550 --> 00:00:08,265
Con una breve comprensión de las Formas Reactivas Angulares,

2
00:00:08,265 --> 00:00:10,670
vamos a pasar al siguiente ejercicio.

3
00:00:10,670 --> 00:00:12,800
En este ejercicio, construiremos

4
00:00:12,800 --> 00:00:18,705
una Forma Reactiva Angular en la aplicación Angular en la que hemos estado trabajando hasta ahora.

5
00:00:18,705 --> 00:00:25,480
En el camino, consolidaremos nuestra comprensión de las Formas Reactivas Angulares.

6
00:00:25,480 --> 00:00:28,435
Para empezar con el ejercicio,

7
00:00:28,435 --> 00:00:31,560
el primer paso que tenemos que hacer es importar

8
00:00:31,560 --> 00:00:35,860
el módulo Angular Reactive Forms en nuestro módulo de aplicación.

9
00:00:35,860 --> 00:00:38,020
Entonces, vamos al módulo de la aplicación,

10
00:00:38,020 --> 00:00:42,160
y luego vemos que ya habíamos importado el módulo de formularios antes.

11
00:00:42,160 --> 00:00:46,540
También importaremos el módulo Formas Reactivas Angulares.

12
00:00:46,540 --> 00:00:49,145
Entonces, voy a copiar eso, pegarlo aquí,

13
00:00:49,145 --> 00:00:53,810
y luego cambiarlo al módulo Formas Reactivas Angulares.

14
00:00:53,810 --> 00:00:57,770
Después de hacer eso, también necesitamos incluirlo en nuestro decorador.

15
00:00:57,770 --> 00:01:00,440
Así que, bajando al decorador aquí,

16
00:01:00,440 --> 00:01:05,235
voy a importar el módulo Formas Reactivas en el decorador.

17
00:01:05,235 --> 00:01:09,365
Otros dos módulos que necesitamos importar para

18
00:01:09,365 --> 00:01:14,245
nuestro formulario es el MatSelectModule, y el MatSlideToggeModule.

19
00:01:14,245 --> 00:01:19,035
El módulo select nos permite utilizar el elemento select,

20
00:01:19,035 --> 00:01:24,360
y el SlideToggle nos permite utilizar el botón slide en nuestro formulario.

21
00:01:24,360 --> 00:01:26,750
Entonces, para hacer eso, vamos a escribir

22
00:01:26,750 --> 00:01:35,670
importar MatSelectModule desde angular/material/select,

23
00:01:36,890 --> 00:01:45,220
e importar MatSlideTogglemodule desde angular/material/slide-toggle,

24
00:01:47,110 --> 00:01:55,195
y luego tenemos que agregarlos a nuestro decorador ngModel en las importaciones.

25
00:01:55,195 --> 00:01:57,145
Así que, yendo allí,

26
00:01:57,145 --> 00:02:02,840
déjame importar MatSelectModule y MatSlideToggeModule allí.

27
00:02:02,840 --> 00:02:04,685
Así que, con estos cambios,

28
00:02:04,685 --> 00:02:08,240
nuestro módulo de aplicaciones ya está listo para permitirnos

29
00:02:08,240 --> 00:02:13,465
usar el módulo de formularios reactivos en nuestra aplicación.

30
00:02:13,465 --> 00:02:14,920
En el siguiente paso,

31
00:02:14,920 --> 00:02:22,105
lo que voy a hacer es crear una clase aquí llamada como Feedback.

32
00:02:22,105 --> 00:02:28,265
Por lo tanto, lo crearé en la carpeta compartida en el archivo feedback.ts.

33
00:02:28,265 --> 00:02:34,790
Ahora, esta es la estructura de la clase que representa

34
00:02:34,790 --> 00:02:38,210
el modelo de datos correspondiente al modelo de formulario que vamos a usar

35
00:02:38,210 --> 00:02:41,840
dentro de nuestra aplicación Angular.

36
00:02:41,840 --> 00:02:50,620
Entonces, creo la clase llamada feedback.

37
00:02:51,210 --> 00:02:53,500
Dentro de la clase Feedback,

38
00:02:53,500 --> 00:02:57,160
voy a incluir algunas propiedades;

39
00:02:57,970 --> 00:03:02,830
nombre, apellido,

40
00:03:02,830 --> 00:03:10,730
luego número de teléfono, Telnum, correo electrónico,

41
00:03:10,730 --> 00:03:20,440
entonces estoy de acuerdo que es una variable booleana,

42
00:03:20,440 --> 00:03:28,385
propiedad booleana, contacttype que es de la cadena de tipo.

43
00:03:28,385 --> 00:03:31,730
Será más claro para usted por qué incluyo todos

44
00:03:31,730 --> 00:03:36,145
estos cuando miramos el diseño del formulario en sí.

45
00:03:36,145 --> 00:03:42,350
Esta clase de comentarios en particular corresponde a los comentarios que

46
00:03:42,350 --> 00:03:48,045
un usuario puede enviar sobre nuestro restaurante dentro de nuestra aplicación Angular.

47
00:03:48,045 --> 00:03:51,800
Entonces, esa es la razón por la que creo esta clase de comentarios.

48
00:03:51,800 --> 00:03:55,865
Vamos a mapear esto en el modelo de formulario en

49
00:03:55,865 --> 00:04:00,650
uno de los componentes allí y también junto con eso,

50
00:04:00,650 --> 00:04:05,920
exportaré una constante que es una matriz de cadenas llamada

51
00:04:05,920 --> 00:04:12,380
contacttype que como

52
00:04:12,380 --> 00:04:19,410
mencioné es una matriz de cadenas que contiene tres cadenas aquí,

53
00:04:25,060 --> 00:04:29,460
none, Tel y correo electrónico.

54
00:04:29,750 --> 00:04:34,875
Entonces, ahora nuestra estructura de modelo de datos está lista.

55
00:04:34,875 --> 00:04:39,019
Así que, más adelante, cuando desarrollemos nuestro lado del servidor,

56
00:04:39,019 --> 00:04:45,555
podremos mapear esto en un dato que almacenemos en el lado del servidor.

57
00:04:45,555 --> 00:04:47,690
Así que, dentro de nuestra aplicación Angular,

58
00:04:47,690 --> 00:04:53,705
esto forma el modelo de datos que vamos a utilizar para nuestra aplicación al igual que el plato,

59
00:04:53,705 --> 00:04:58,850
el líder, y la promoción que hemos desarrollado esta es otra clase que

60
00:04:58,850 --> 00:05:04,375
nos permite agrupar un conjunto de propiedades en una clase aquí.

61
00:05:04,375 --> 00:05:06,380
Así que, una vez que hayamos completado eso,

62
00:05:06,380 --> 00:05:10,365
vamos a proceder con la creación de la forma Reactiva.

63
00:05:10,365 --> 00:05:16,095
Vamos a crear el formulario Reactivo en nuestro componente de contacto.

64
00:05:16,095 --> 00:05:20,780
Por lo tanto, vamos al archivo component.ts de contacto,

65
00:05:20,780 --> 00:05:22,520
y también vamos a incluir

66
00:05:22,520 --> 00:05:26,400
el formulario correspondiente en el archivo de plantilla de componentes de contacto.

67
00:05:26,400 --> 00:05:29,475
Entonces, en el archivo de script de tipo de componentes de contacto,

68
00:05:29,475 --> 00:05:32,135
así que aquí es donde vamos a preparar nuestro formulario

69
00:05:32,135 --> 00:05:35,555
ya que vimos que el formulario Reactivo se construye principalmente

70
00:05:35,555 --> 00:05:43,265
en el código y luego se mapea en los elementos del formulario en el archivo de plantilla.

71
00:05:43,265 --> 00:05:49,360
Entonces, aquí voy a importar algunas clases.

72
00:05:49,360 --> 00:05:52,655
Importaré FormBuilder,

73
00:05:52,655 --> 00:06:00,055
y luego FormBuilder, y validadores.

74
00:06:00,055 --> 00:06:05,890
Los validadores se usarían para la validación de formularios, que será en el próximo ejercicio,

75
00:06:05,890 --> 00:06:10,125
, pero ya los importaré en este momento.

76
00:06:10,125 --> 00:06:15,735
Se importan desde la biblioteca de formularios angulares.

77
00:06:15,735 --> 00:06:19,300
Así que, una vez que importemos esto,

78
00:06:19,300 --> 00:06:29,790
importaremos la clase Feedback y la constante contacttype

79
00:06:29,790 --> 00:06:38,360
del archivo compartido/feedback

80
00:06:38,360 --> 00:06:41,415
que acabamos de crear en el paso anterior.

81
00:06:41,415 --> 00:06:44,850
Necesitamos esto dentro de nuestra aplicación.

82
00:06:44,850 --> 00:06:49,455
Ahora, dentro de mi clase aquí,

83
00:06:49,455 --> 00:07:00,310
voy a declarar algunas variables llamadas feedbackForm que es del tipo FormGroup.

84
00:07:00,410 --> 00:07:07,475
Este es el modelo de formulario que va a alojar

85
00:07:07,475 --> 00:07:11,960
la forma Reactiva aquí y luego voy a

86
00:07:11,960 --> 00:07:17,270
declarar una retroalimentación variable del tipo Feedback,

87
00:07:17,270 --> 00:07:19,745
por lo que este sería el modelo de datos correspondiente.

88
00:07:19,745 --> 00:07:27,930
Más tarde en este valor de Feedback se puede obtener de un servidor dentro de nuestra aplicación,

89
00:07:27,930 --> 00:07:34,205
y luego también declararé el contacttype como una variable

90
00:07:34,205 --> 00:07:41,045
que es de la matriz de cadenas contacttype.

91
00:07:41,045 --> 00:07:44,860
Porque necesito hacer uso de esto dentro de nuestra aplicación.

92
00:07:44,860 --> 00:07:48,675
Para construir la forma Reactiva dentro del constructor,

93
00:07:48,675 --> 00:07:58,605
inyectaría FormBuilder en el constructor aquí,

94
00:07:58,605 --> 00:08:03,605
y crearía un método separado llamado

95
00:08:03,605 --> 00:08:08,950
CreateForm que invocaré dentro del constructor,

96
00:08:08,950 --> 00:08:12,300
así que cuando se construya esta clase, se creará el formulario.

97
00:08:12,300 --> 00:08:17,870
Entonces, CreateForm será un método dentro del cual crearé el formulario real.

98
00:08:17,870 --> 00:08:24,060
Entonces, permítanme agregar el método CreateForm aquí.

99
00:08:24,060 --> 00:08:27,590
Esto es solo conveniencia, podría haber simplemente

100
00:08:27,590 --> 00:08:31,250
incluido el código directamente en el constructor en sí,

101
00:08:31,250 --> 00:08:34,760
pero verá que podría haber razones por las que

102
00:08:34,760 --> 00:08:41,060
podría necesitar llamar a este CreateForm desde otras ubicaciones.

103
00:08:41,060 --> 00:08:47,240
Entonces, es mejor ponerlo en un método separado aquí.

104
00:08:47,240 --> 00:08:50,830
Entonces, crearé el formulario aquí, Forma reactiva,

105
00:08:50,830 --> 00:08:56,775
y luego lo pondré en la variable FeedbackForm que he declarado anteriormente.

106
00:08:56,775 --> 00:08:58,335
Así que, para crear el formulario,

107
00:08:58,335 --> 00:09:02,215
voy a tomar la ayuda del FormBuilder,

108
00:09:02,215 --> 00:09:05,145
el FB que he declarado en el constructor,

109
00:09:05,145 --> 00:09:10,760
y luego el FB proporciona un método llamado Grupo que me permite

110
00:09:10,760 --> 00:09:16,910
definir un grupo, un FormGroup aquí.

111
00:09:16,910 --> 00:09:23,040
Así que, dentro de allí, ahora voy a construir las partes de la forma allí.

112
00:09:23,040 --> 00:09:24,845
Así que, dentro de este grupo,

113
00:09:24,845 --> 00:09:28,775
ahora puedo incluir los diversos controles de formulario allí.

114
00:09:28,775 --> 00:09:34,050
Entonces, primero pondría el nombre,

115
00:09:34,050 --> 00:09:44,200
y luego el apellido.

116
00:09:45,910 --> 00:09:51,175
Observe cómo los campos dentro de mi formulario están

117
00:09:51,175 --> 00:09:56,460
reflejando estrechamente los campos dentro de mi clase de comentarios.

118
00:09:56,460 --> 00:09:59,790
No tienen que coincidir exactamente, pero si coinciden,

119
00:09:59,790 --> 00:10:01,630
luego transferir los datos entre

120
00:10:01,630 --> 00:10:06,550
el modelo de datos y los cuatro modelos se vuelve mucho más sencillo.

121
00:10:06,550 --> 00:10:12,500
Telnum que voy a dejar porque uh-

122
00:10:13,040 --> 00:10:15,800
He añadido nombre, apellido,

123
00:10:15,800 --> 00:10:25,140
Telnum, correo electrónico, y de acuerdo, y el tipo de contacto,

124
00:10:25,550 --> 00:10:31,360
que voy a establecer como ninguno para empezar.

125
00:10:31,360 --> 00:10:35,710
Recuerde que el tipo de contacto es una matriz de cadena que contiene tres de ellos

126
00:10:35,710 --> 00:10:40,015
, por lo que debe elegir uno de ellos y luego asignarlo a esta propiedad aquí.

127
00:10:40,015 --> 00:10:44,920
Por lo tanto, voy a elegir esto como ninguno y luego el mensaje,

128
00:10:44,920 --> 00:10:49,120
que será la retroalimentación que el usuario da sobre

129
00:10:49,120 --> 00:10:53,605
nuestro restaurante mapeado en una cadena aquí.

130
00:10:53,605 --> 00:10:59,765
Por lo tanto, estos son los diversos campos que formarán parte de nuestro formulario aquí.

131
00:10:59,765 --> 00:11:04,370
Así que, una vez que tengamos la estructura del formulario en su lugar aquí,

132
00:11:04,370 --> 00:11:07,525
así que noten que cuando se llame a este método,

133
00:11:07,525 --> 00:11:12,455
esta forma será la forma reactiva se creará en el código aquí.

134
00:11:12,455 --> 00:11:16,595
Ahora, necesitamos mapear esto en la vista,

135
00:11:16,595 --> 00:11:17,900
en la plantilla allí.

136
00:11:17,900 --> 00:11:21,470
Por lo tanto, vamos a hacer eso en el siguiente paso.

137
00:11:21,470 --> 00:11:26,130
Así que, ahora, yendo a nuestro archivo de plantilla,

138
00:11:26,130 --> 00:11:31,415
en el archivo de plantilla de componente de contacto,

139
00:11:31,415 --> 00:11:36,159
nos desplazaremos hacia abajo y luego incluiremos esto en

140
00:11:36,159 --> 00:11:42,910
nuestro archivo de plantilla justo después de este div aquí,

141
00:11:42,910 --> 00:11:50,325
así que tenemos este div en nuestra vista de contacto que contiene la información de ubicación y así sucesivamente.

142
00:11:50,325 --> 00:11:54,510
Justo después de eso, voy a crear otro div dentro de

143
00:11:54,510 --> 00:11:59,820
que albergará la forma reactiva allí.

144
00:11:59,820 --> 00:12:17,720
Déjame aplicar algunas cosas de diseño flexible

145
00:12:17,720 --> 00:12:19,100
aquí a mi div.

146
00:12:19,100 --> 00:12:22,110
Ahora, este tamaño de formulario como puede ver debería ser

147
00:12:22,110 --> 00:12:25,905
una clase CSS que crearé un poco más tarde.

148
00:12:25,905 --> 00:12:31,540
Dentro de este div, voy a alojar mi formulario.

149
00:12:31,540 --> 00:12:36,680
Entonces, una vez que puse este div en mi archivo de plantilla,

150
00:12:36,680 --> 00:12:40,180
ahora déjame comenzar con un encabezado para esto.

151
00:12:40,180 --> 00:12:47,675
Por lo tanto, diremos, «Envíenos sus comentarios».

152
00:12:47,675 --> 00:12:54,250
Por lo tanto, usted está buscando los comentarios de los visitantes de su sitio.

153
00:12:54,950 --> 00:12:58,050
Comenzaremos a construir el formulario.

154
00:12:58,050 --> 00:13:03,200
Entonces, permítanme comenzar con la etiqueta de formulario

155
00:13:03,200 --> 00:13:08,275
aquí y luego construiremos el formulario dentro de esta etiqueta de formulario aquí.

156
00:13:08,275 --> 00:13:12,180
Entonces, para el formulario, lo primero que haré es aplicar

157
00:13:12,180 --> 00:13:16,535
la no validación porque la validación será atendida por angular,

158
00:13:16,535 --> 00:13:21,380
y luego también aplicar un grupo de formularios aquí.

159
00:13:21,380 --> 00:13:38,060
Entonces, observe que este grupo de formularios es el que me vinculará al modelo de formulario reactivo

160
00:13:38,060 --> 00:13:40,555
que creé en mi código aquí.

161
00:13:40,555 --> 00:13:42,380
Así que, al hacer esto,

162
00:13:42,380 --> 00:13:47,255
estamos vinculando en esta forma reactiva en la plantilla a

163
00:13:47,255 --> 00:13:53,680
el modelo de formulario correspondiente en nuestro archivo mecanografiado allí.

164
00:13:53,680 --> 00:13:59,100
Por lo tanto, la forma en que lo hacemos es declarar el grupo de formularios y el formulario de retroalimentación.

165
00:13:59,100 --> 00:14:00,910
Te mostraré cómo vincular en

166
00:14:00,910 --> 00:14:04,840
los elementos de formulario restantes a

167
00:14:04,840 --> 00:14:09,315
las propiedades correspondientes en el modelo de formulario en poco tiempo.

168
00:14:09,315 --> 00:14:11,325
Entonces, después de hacer esto,

169
00:14:11,325 --> 00:14:20,480
vamos a poner en nuestro formulario elementos en su lugar dentro de este modelo de formulario.

170
00:14:20,480 --> 00:14:24,490
Entonces, declararé una P por aquí y luego dentro de allí,

171
00:14:24,490 --> 00:14:28,860
usaré el campo mat-form-campo aquí,

172
00:14:28,860 --> 00:14:35,475
a la que aplicaré una clase CSS llamada Half-width,

173
00:14:35,475 --> 00:14:39,600
y cerraré esto.

174
00:14:39,600 --> 00:14:45,195
Entonces, esto pondría mi primer control de formulario en su lugar aquí.

175
00:14:45,195 --> 00:14:55,930
Entonces, aquí, pondré la entrada y luego aplicaré el MatInput del material angular aquí.

176
00:14:56,930 --> 00:15:03,530
Para vincular esto a la propiedad dentro de mi modelo de formulario,

177
00:15:03,530 --> 00:15:08,630
necesitaría hacer FormControlName,

178
00:15:09,980 --> 00:15:14,650
y el primero es el nombre.

179
00:15:14,650 --> 00:15:20,370
Entonces, de esa manera, esta entrada ahora está vinculada a la propiedad de primer nombre

180
00:15:20,370 --> 00:15:26,015
que he definido dentro de mi modelo de formulario que he definido en el código.

181
00:15:26,015 --> 00:15:29,680
El primer nombre, y luego definiré

182
00:15:29,680 --> 00:15:37,900
el marcador de posición como nombre.

183
00:15:37,900 --> 00:15:39,970
Así que, como es de esperar,

184
00:15:39,970 --> 00:15:43,685
este campo de entrada se va a utilizar para escribir

185
00:15:43,685 --> 00:15:51,215
el nombre del usuario, escriba texto.

186
00:15:51,215 --> 00:15:56,935
Curiosamente, ves que ya no tenemos el modelo ng-aquí

187
00:15:56,935 --> 00:16:02,950
o ninguna de las variables de plantilla y así sucesivamente en mi forma.

188
00:16:02,950 --> 00:16:05,945
Las formas reactivas funcionan de manera diferente.

189
00:16:05,945 --> 00:16:08,480
Por lo tanto, como puede ver en las formas reactivas,

190
00:16:08,480 --> 00:16:11,975
asigna el grupo de formularios y luego intenta los nombres de control de formulario.

191
00:16:11,975 --> 00:16:16,095
Si está creando controles de formulario con la clase de control de formulario,

192
00:16:16,095 --> 00:16:20,440
declararía esto como control de formulario entre corchetes y luego lo emparejaría

193
00:16:20,440 --> 00:16:24,910
con el control de formulario correspondiente que cree en su tipo escéptico.

194
00:16:24,910 --> 00:16:28,940
Pero ahora ya que estamos usando el constructor de formularios,

195
00:16:28,940 --> 00:16:33,280
solo necesito vincular en el grupo de formularios como

196
00:16:33,280 --> 00:16:38,605
esto en mi formulario al modelo de formulario correspondiente,

197
00:16:38,605 --> 00:16:39,890
y luego el resto de ellos,

198
00:16:39,890 --> 00:16:42,690
Declaro como nombre de control de formulario y luego los comparo con

199
00:16:42,690 --> 00:16:45,085
las propiedades correspondientes en

200
00:16:45,085 --> 00:16:48,995
el control de formulario que tengo en mi mecanografía de la manera de código.

201
00:16:48,995 --> 00:16:53,950
Por lo tanto, esto creará el campo de nombre allí.

202
00:16:53,950 --> 00:16:56,400
Déjame copiar esto.

203
00:16:56,400 --> 00:17:00,150
Necesito un apellido aquí.

204
00:17:00,150 --> 00:17:07,005
Entonces, voy a copiar esto y luego decir que el nombre del control del formulario es Apellido,

205
00:17:07,005 --> 00:17:10,510
y el marcador de posición es Apellido,

206
00:17:10,510 --> 00:17:12,550
y del tipo, Texto, aquí.

207
00:17:12,550 --> 00:17:18,975
tuve nombre,

208
00:17:18,975 --> 00:17:24,970
tenía apellido y si miras el modelo de control de formularios,

209
00:17:24,970 --> 00:17:27,400
verás que después de nombre y apellido,

210
00:17:27,400 --> 00:17:31,770
tengo el número de teléfono como el siguiente,

211
00:17:31,770 --> 00:17:34,325
así que voy a pegar esto aquí.

212
00:17:34,325 --> 00:17:38,390
Entonces, el nombre del control de formulario aquí es Telnum,

213
00:17:38,390 --> 00:17:46,920
y el marcador de posición es Número de teléfono,

214
00:17:46,920 --> 00:17:51,405
y el tipo es Tel.

215
00:17:51,405 --> 00:17:53,385
Mientras estamos en ello,

216
00:17:53,385 --> 00:17:59,905
voy a atar lo Requerido en estos aunque eso no es realmente requerido.

217
00:17:59,905 --> 00:18:08,275
Pero permítanme agregar eso allí.

218
00:18:08,275 --> 00:18:11,920
Ahora, número de teléfono, entonces tengo correo electrónico.

219
00:18:11,920 --> 00:18:20,679
Entonces, el siguiente campo es Email,

220
00:18:25,520 --> 00:18:32,100
y el marcador de posición es Email,

221
00:18:32,100 --> 00:18:35,510
y el tipo también lo es.

222
00:18:35,510 --> 00:18:38,600
Así que, ahora tengo primero,

223
00:18:38,600 --> 00:18:41,610
apellido, y número de teléfono, y correo electrónico.

224
00:18:41,610 --> 00:18:52,820
Lo siguiente que voy a añadir es un interruptor de diapositivas.

225
00:18:53,850 --> 00:18:56,600
Antes usamos la casilla de verificación.

226
00:18:56,600 --> 00:19:03,240
El deslizador es otro control de formulario que proporciona el material angular,

227
00:19:03,240 --> 00:19:07,150
que es un poco diferente de la casilla de verificación y

228
00:19:07,150 --> 00:19:11,480
pensé que voy a ilustrar con usted usándolo en el formulario aquí.

229
00:19:11,480 --> 00:19:18,680
Ahora, aquí es donde usaré una tabla para posicionar estos elementos.

230
00:19:19,890 --> 00:19:22,300
La razón es que,

231
00:19:22,300 --> 00:19:25,520
estos elementos son difíciles de posicionar sin usar una tabla.

232
00:19:25,520 --> 00:19:27,605
Así que, dentro de la tabla,

233
00:19:27,605 --> 00:19:31,740
estoy seguro de que todos saben cómo usar la tabla,

234
00:19:35,280 --> 00:19:39,740
intenté colocarlos usando el diseño flex estándar

235
00:19:39,740 --> 00:19:44,970
y no tuve mucho éxito con eso.

236
00:19:44,970 --> 00:19:50,510
Entonces, en cambio, recurre a usar una tabla para colocar estos dos elementos en mi forma.

237
00:19:50,510 --> 00:19:54,350
Por lo tanto, mat-slide-toggle.

238
00:19:54,350 --> 00:19:57,680
Por lo tanto, el deslizador es como la casilla de verificación,

239
00:19:57,680 --> 00:20:00,390
puede activarlo y desactivarlo,

240
00:20:00,390 --> 00:20:04,550
y esto puede seleccionar un valor booleano aquí.

241
00:20:04,550 --> 00:20:14,200
Por lo tanto, slidetoggle y el FormControlName está de acuerdo.

242
00:20:14,200 --> 00:20:16,140
Si recuerda, estábamos de acuerdo,

243
00:20:16,140 --> 00:20:22,925
que era una propiedad booleana en el control de formulario.

244
00:20:22,925 --> 00:20:25,735
Entonces, para esto, yo diría,

245
00:20:25,735 --> 00:20:29,340
¿podemos contactar con usted?

246
00:20:29,340 --> 00:20:35,140
Ahora, será más claro para ustedes cuando vean la versión final de

247
00:20:35,140 --> 00:20:43,060
este formulario para entender por qué estamos haciendo esto.

248
00:20:43,060 --> 00:20:49,895
Ahora mismo, vamos a poner todas las partes en mi forma reactiva aquí.

249
00:20:49,895 --> 00:20:55,925
La segunda parte voy a usar un select,

250
00:20:55,925 --> 00:21:03,920
que se soporta a través del componente mat-select en material angular.

251
00:21:03,920 --> 00:21:12,460
Entonces, MD seleccione y para esto el marcador de posición,

252
00:21:13,520 --> 00:21:21,690
definiré como «¿Cómo?»,

253
00:21:21,690 --> 00:21:27,580
y formControlName con el que voy a vincular esto es

254
00:21:27,580 --> 00:21:37,650
«contacttype» y cerrar el MD select.

255
00:21:37,650 --> 00:21:41,720
Entonces, esto me permite crear un elemento de selección en mi formulario.

256
00:21:41,720 --> 00:21:44,660
Entonces, el elemento de selección es algo que me da

257
00:21:44,660 --> 00:21:48,535
una lista desplegable de la que puedo seleccionar uno de ellos.

258
00:21:48,535 --> 00:21:50,905
Por lo tanto, para crear la lista desplegable,

259
00:21:50,905 --> 00:22:00,510
voy a usar la opción de estera que está disponible como un componente en material angular.

260
00:22:00,510 --> 00:22:05,035
Por lo tanto, la opción de estera se incluye dentro de la selección de estera.

261
00:22:05,035 --> 00:22:06,810
Entonces, para la opción,

262
00:22:06,810 --> 00:22:09,570
Voy a hacer *ngFor,

263
00:22:09,570 --> 00:22:17,070
y estoy seguro de que recuerdas la directiva ngFor de antes,

264
00:22:17,070 --> 00:22:24,750
*ngFor «Let ctype of contactType».

265
00:22:24,750 --> 00:22:28,360
Ahora, ves por qué declaré la variable de tipo de contacto

266
00:22:28,360 --> 00:22:44,740
en mi código antes y luego diría, [value] = «ctype».

267
00:22:44,740 --> 00:23:00,840
Entonces, estoy configurando mi opción en mi selección aquí y usando interpolación,

268
00:23:00,840 --> 00:23:03,040
escribiré ctype aquí.

269
00:23:03,040 --> 00:23:10,100
Entonces, eso me dará un menú desplegable de opciones en mi formulario allí.

270
00:23:10,100 --> 00:23:14,665
Así que, esa es la siguiente parte y finalmente,

271
00:23:14,665 --> 00:23:21,270
después de la tabla, voy a poner en un área de texto aquí.

272
00:23:21,270 --> 00:23:31,320
Entonces, yo diría p y cerrar esa P. Para peinar la forma reactiva,

273
00:23:31,320 --> 00:23:35,395
el elemento P me permite posicionar los elementos correctamente.

274
00:23:35,395 --> 00:23:37,580
Entonces, es por eso que estoy usando eso.

275
00:23:37,580 --> 00:23:42,380
Entonces, como recordarán,

276
00:23:42,540 --> 00:23:48,740
mat-form-field me permite

277
00:23:48,740 --> 00:23:56,239
incluir un contenedor de entrada aquí y luego dentro de allí voy a definir un área de texto,

278
00:23:56,239 --> 00:24:00,310
que aplico

279
00:24:00,310 --> 00:24:08,650
la directiva MatInput a eso.

280
00:24:08,650 --> 00:24:15,460
Entonces, el FormControlName, voy a dar como «mensaje».

281
00:24:15,460 --> 00:24:23,290
Por lo tanto, este elemento de formulario en particular permite al usuario escribir

282
00:24:23,290 --> 00:24:31,305
en el mensaje de retroalimentación para mi restaurante.

283
00:24:31,305 --> 00:24:37,100
Entonces, marcador de posición «Your Feedback»,

284
00:24:37,100 --> 00:24:42,610
y luego le daré al área de texto un tamaño de

285
00:24:42,610 --> 00:24:51,245
12 filas aquí y luego cerraré el área de texto.

286
00:24:51,245 --> 00:24:58,005
Por lo tanto, aquí tenemos un área de texto con las 12 filas.

287
00:24:58,005 --> 00:25:03,350
Entonces, eso completa la mayor parte de la forma.

288
00:25:03,350 --> 00:25:07,910
Lo sentimos, esto debería estar fuera de la mesa.

289
00:25:08,070 --> 00:25:11,830
Necesitamos un botón para enviar el formulario.

290
00:25:11,830 --> 00:25:20,755
Así que, justo ahí, incluiré un botón del tipo = «enviar» y

291
00:25:20,755 --> 00:25:24,155
este botón de enviar aplicaré

292
00:25:24,155 --> 00:25:32,270
el botón de mat-y también aplicaré la clase = «background-primary».

293
00:25:33,600 --> 00:25:42,770
Me has visto aplicando esto al botón en el ejercicio anterior también,

294
00:25:42,770 --> 00:25:45,740
tipo similar de botón.

295
00:25:45,740 --> 00:25:48,510
Así que ahora mi formulario está casi listo.

296
00:25:48,510 --> 00:25:54,455
Puede agregar algunas clases CSS al componente de contacto.

297
00:25:54,455 --> 00:25:58,725
Las tres clases que he usado son de ancho completo,

298
00:25:58,725 --> 00:26:06,420
esto se usa para establecer el tamaño de los elementos allí.

299
00:26:06,420 --> 00:26:10,980
Entonces, ancho completo 95 por ciento, ancho medio.

300
00:26:11,200 --> 00:26:17,565
Entonces, esto me permite dimensionar los elementos correctamente,

301
00:26:17,565 --> 00:26:23,930
45 por ciento de ancho medio y luego tamaño de forma.

302
00:26:26,400 --> 00:26:32,740
Entonces, uso estas clases CSS en mi forma.

303
00:26:32,740 --> 00:26:38,230
Así que con esto, vamos a guardar los cambios,

304
00:26:38,460 --> 00:26:44,150
y echar un vistazo rápido al formulario en nuestra solicitud.

305
00:26:44,150 --> 00:26:45,915
Ir al navegador,

306
00:26:45,915 --> 00:26:48,725
en la vista de contacto,

307
00:26:48,725 --> 00:26:54,210
mientras se desplaza hacia abajo, ahora ve el formulario en su lugar en la vista de contacto aquí.

308
00:26:54,210 --> 00:26:57,660
Por lo tanto, usted ve el envíenos sus comentarios,

309
00:26:57,660 --> 00:27:01,985
el nombre, el apellido, el número de teléfono,

310
00:27:01,985 --> 00:27:06,695
el correo electrónico y la diapositiva toggle aquí,

311
00:27:06,695 --> 00:27:12,395
para que vea el interruptor de diapositiva en su lugar allí y luego este es este seleccionar.

312
00:27:12,395 --> 00:27:15,650
La selección me permite seleccionar uno de estos tres.

313
00:27:15,650 --> 00:27:20,415
El valor predeterminado es none y luego el área de texto aquí,

314
00:27:20,415 --> 00:27:25,675
me permite escribir mis comentarios aquí y luego el botón submit.

315
00:27:25,675 --> 00:27:28,940
Por lo tanto, esto completa el formulario reactivo en

316
00:27:28,940 --> 00:27:32,690
mi solicitud pero cuando haces clic en el botón Enviar,

317
00:27:32,690 --> 00:27:35,000
no podrás enviar este formulario.

318
00:27:35,000 --> 00:27:39,480
Por lo tanto, tenemos que agregar el ngSubmit a nuestro formulario en la plantilla

319
00:27:39,480 --> 00:27:44,485
y luego agregar un método en nuestro archivo de script de tipo.

320
00:27:44,485 --> 00:27:47,185
Ir a nuestro código,

321
00:27:47,185 --> 00:27:49,315
al formulario aquí,

322
00:27:49,315 --> 00:27:53,830
junto con el formulario novalidate FormGroup,

323
00:27:53,830 --> 00:28:01,670
voy a agregar un ngSubmit al formulario.

324
00:28:02,730 --> 00:28:10,025
Llamaré al método como método onSubmit.

325
00:28:10,025 --> 00:28:14,155
Así que con esto, mi formulario ya está listo para enviar información.

326
00:28:14,155 --> 00:28:17,195
Necesito entrar en los componentes de contacto, archivo de script de tipo

327
00:28:17,195 --> 00:28:25,380
y luego crear el método onSubmit aquí.

328
00:28:25,380 --> 00:28:28,420
Entonces, en el método onSubmit,

329
00:28:31,450 --> 00:28:37,030
sucede que el modelo de formulario es exactamente el mismo que los modelos de datos,

330
00:28:37,030 --> 00:28:45,790
por lo que simplemente puedo tomar el valor del modelo de formulario.

331
00:28:45,790 --> 00:28:49,840
Entonces, cuando tienes un modelo de formulario como este formulario de comentarios,

332
00:28:49,840 --> 00:28:54,410
el formulario de comentarios da una propiedad llamada value,

333
00:28:54,410 --> 00:29:00,020
que me permite recuperar el valor actual de todos estos de mi formulario de comentarios.

334
00:29:00,020 --> 00:29:03,810
Entonces esto formará un objeto JavaScript,

335
00:29:03,810 --> 00:29:06,740
que luego puedo mapear en el objeto JavaScript de retroalimentación.

336
00:29:06,740 --> 00:29:10,170
Resulta que ambos tienen exactamente la misma estructura,

337
00:29:10,170 --> 00:29:11,690
el modelo de datos y el modelo de formulario.

338
00:29:11,690 --> 00:29:14,140
Entonces, es por eso que puedo cargar rápidamente el valor

339
00:29:14,140 --> 00:29:18,120
directamente en el modelo de datos cuando el usuario envía el formulario.

340
00:29:18,120 --> 00:29:21,120
Si su modelo de datos es algo diferente del modelo de formulario,

341
00:29:21,120 --> 00:29:24,460
necesita asignar propiedades individuales explícitamente y

342
00:29:24,460 --> 00:29:28,890
que se puede hacer dentro de este método allí.

343
00:29:29,610 --> 00:29:36,455
Sólo para mostrarte que el formulario se envía correctamente,

344
00:29:36,455 --> 00:29:44,760
voy a registrar el valor en la consola, la consola de JavaScript.

345
00:29:44,760 --> 00:29:50,200
Entonces yo diría, this.feedbackForm.reset.

346
00:29:51,320 --> 00:30:00,405
El método de restablecimiento le permite restablecer el formulario a su estado normal,

347
00:30:00,405 --> 00:30:03,000
eliminando todas las entradas que ha realizado en el formulario.

348
00:30:03,000 --> 00:30:05,480
Entonces, una vez que el usuario envíe,

349
00:30:05,480 --> 00:30:09,030
normalmente capturaría los valores y luego restablecería el formulario para que

350
00:30:09,030 --> 00:30:14,365
que la entrada adicional se puede hacer como una forma separada.

351
00:30:14,365 --> 00:30:17,450
Así que ese es el método de reinicio que usaremos aquí.

352
00:30:17,450 --> 00:30:19,265
Así que con estos cambios,

353
00:30:19,265 --> 00:30:23,900
vamos a guardar los cambios y luego ir a ver nuestro formulario en acción.

354
00:30:23,900 --> 00:30:30,080
Una última pequeña cosa que quiero agregar a mi plantilla es mostrarte

355
00:30:30,080 --> 00:30:36,200
los valores del formulario dentro de mi propio formulario,

356
00:30:36,200 --> 00:30:38,230
aunque en una aplicación real,

357
00:30:38,230 --> 00:30:42,580
no estarías haciendo esto, pero solo quería ilustrarte cómo

358
00:30:42,580 --> 00:30:47,165
puedes ver los valores del FeedbackForm directamente aquí,

359
00:30:47,165 --> 00:30:49,095
del Modelo de FeedbackForm.

360
00:30:49,095 --> 00:30:52,395
Así que, puedo hacer dentro aquí.

361
00:30:52,395 --> 00:31:02,625
Puedo decir feedbackForm.Value y canalizado a través de json para mostrar aquí.

362
00:31:02,625 --> 00:31:08,435
Del mismo modo, puedo hacer aquí, FeedbackForm.

363
00:31:08,435 --> 00:31:15,840
Hay otra propiedad asociada con ese modelo de formulario llamado status,

364
00:31:15,840 --> 00:31:20,440
que me muestra el estado del formulario en este momento,

365
00:31:20,440 --> 00:31:22,265
si es válido o no válido.

366
00:31:22,265 --> 00:31:26,900
Entonces, voy a agregar estos dos en mi formulario aquí,

367
00:31:26,900 --> 00:31:30,285
para que esto se muestre en mi plantilla.

368
00:31:30,285 --> 00:31:34,670
Esto es solo para darle una vista instantánea de lo que

369
00:31:34,670 --> 00:31:41,620
contiene el modelo de formulario en mi archivo de script de tipo.

370
00:31:42,460 --> 00:31:47,590
Guardemos los cambios y vayamos y echemos un vistazo rápido a nuestro formulario.

371
00:31:47,590 --> 00:31:50,325
Volviendo a nuestro navegador,

372
00:31:50,325 --> 00:31:55,630
ahora puede ver que los valores del formulario se muestran

373
00:31:55,630 --> 00:32:04,460
aquí y el formulario está en buena forma para permitirnos escribir los valores.

374
00:32:04,460 --> 00:32:08,660
Así que vamos a escribir algunos valores aleatorios aquí y usted puede

375
00:32:08,660 --> 00:32:14,090
inmediatamente ver el valor se está reflejando en el modelo de FeedbackForm allí,

376
00:32:14,090 --> 00:32:24,020
justo en la parte superior y el correo electrónico.

377
00:32:26,050 --> 00:32:29,295
no importa, simplemente escribe algo.

378
00:32:29,295 --> 00:32:31,680
Entonces, este interruptor de alternancia,

379
00:32:31,680 --> 00:32:34,575
puedes ver que cuando lo enciendes y lo desactiva,

380
00:32:34,575 --> 00:32:39,385
el cambio de acuerdo cambia de falso a verdadero.

381
00:32:39,385 --> 00:32:43,030
Así que déjame dejarlo en verdadero y luego seleccionar.

382
00:32:43,030 --> 00:32:50,640
Permítanme seleccionar el correo electrónico y luego verá que el tipo de contacto aquí ha cambiado a correo electrónico.

383
00:32:50,640 --> 00:32:56,060
Por lo tanto, así es como seleccionaría cambiar el valor.

384
00:32:56,060 --> 00:33:00,575
Por lo tanto, digamos correo electrónico y luego aquí,

385
00:33:00,575 --> 00:33:01,940
podemos escribir el mensaje.

386
00:33:01,940 --> 00:33:05,960
Un poco de texto aleatorio aquí y usted sería

387
00:33:05,960 --> 00:33:10,675
capaz de ver que el texto aleatorio se refleja en el mensaje allí.

388
00:33:10,675 --> 00:33:12,690
Enviemos el formulario.

389
00:33:12,690 --> 00:33:16,680
Entonces, cuando haces clic en el Enviar inmediatamente ves en la consola,

390
00:33:16,680 --> 00:33:20,605
el valor que se imprime aquí,

391
00:33:20,605 --> 00:33:21,870
en este objeto aquí.

392
00:33:21,870 --> 00:33:27,155
Así que puede navegar para ver todas las propiedades de ese objeto,

393
00:33:27,155 --> 00:33:31,050
el modelo de formulario de retroalimentación.

394
00:33:31,050 --> 00:33:38,210
Por lo tanto, esta es una ilustración de una forma reactiva dentro de nuestra aplicación.

395
00:33:38,210 --> 00:33:41,850
Esto completa este ejercicio.

396
00:33:41,850 --> 00:33:44,800
En este ejercicio, hemos visto cómo podemos crear

397
00:33:44,800 --> 00:33:47,910
una forma reactiva dentro de nuestra aplicación Angular.

398
00:33:47,910 --> 00:33:52,910
Este es también un buen punto en el que puedes hacer una confirmación de Git con el mensaje,

399
00:33:52,910 --> 00:33:55,670
reactiva forma la parte uno.