1
00:00:00,000 --> 00:00:04,598
[MUSIC]

2
00:00:04,598 --> 00:00:10,170
Es hora de pasar a la tercera tarea de este curso.

3
00:00:10,170 --> 00:00:13,410
En esta tarea, como ya esperabas,

4
00:00:13,410 --> 00:00:17,190
veremos formas angulares y observables.

5
00:00:17,190 --> 00:00:22,480
Eso es lo que aprendimos en este módulo particular del curso.

6
00:00:22,480 --> 00:00:28,600
En esta tarea, diseñará un formulario

7
00:00:28,600 --> 00:00:33,440
dentro de la vista de componentes de detalle de plato que permitirá a

8
00:00:33,440 --> 00:00:38,540
los usuarios enviar su comentario sobre un plato específico.

9
00:00:39,640 --> 00:00:45,504
Utilizarás formas reactivas angulares para diseñar el formulario y

10
00:00:45,504 --> 00:00:50,127
usarás los cambios de valor observables en

11
00:00:50,127 --> 00:00:53,623
para iniciar la validación del formulario,

12
00:00:53,623 --> 00:00:59,147
al igual que hicimos en el ejercicio que acabas de completar y

13
00:00:59,147 --> 00:01:04,109
usarás un nuevo componente de material angular llamado

14
00:01:04,109 --> 00:01:07,747
Angular Componente deslizante de material.

15
00:01:07,747 --> 00:01:13,987
El componente deslizante se utilizará para introducir la calificación para

16
00:01:13,987 --> 00:01:19,050
el plato por la persona que envía el recuento.

17
00:01:20,230 --> 00:01:24,620
Veamos las tres tareas de esta tarea con un poco más de detalle.

18
00:01:26,410 --> 00:01:31,760
Así que aquí, les estoy mostrando su primer plato del menú en orden

19
00:01:31,760 --> 00:01:38,510
para ilustrarles las tres tareas que necesitan ser completadas en esta tarea.

20
00:01:38,510 --> 00:01:43,238
Así que en esta tarea, vamos a crear un formulario en

21
00:01:43,238 --> 00:01:48,594
la sección de comentarios de su componente de detalle de plato.

22
00:01:48,594 --> 00:01:51,579
El formulario contiene dos campos aquí.

23
00:01:51,579 --> 00:01:55,122
El campo de nombre y un campo de comentario.

24
00:01:55,122 --> 00:02:00,570
En el campo nombre, el usuario introducirá el nombre del autor para el comentario.

25
00:02:00,570 --> 00:02:04,406
Luego, en su campo de comentarios, que es un área de texto,

26
00:02:04,406 --> 00:02:10,037
le permitirá al autor introducir el comentario que desea enviar.

27
00:02:10,037 --> 00:02:14,639
Además, con el fin de obtener la calificación para el plato,

28
00:02:14,639 --> 00:02:22,010
vamos a utilizar este componente de material angular llamado deslizador de material angular.

29
00:02:22,010 --> 00:02:23,730
Para este componente deslizante,

30
00:02:25,040 --> 00:02:30,260
se proporciona un enlace a la documentación en los recursos adicionales.

31
00:02:30,260 --> 00:02:33,541
El componente deslizante es bastante sencillo de crear.

32
00:02:33,541 --> 00:02:38,788
Para este componente deslizante, mostrará las marcas de graduación como esta.

33
00:02:38,788 --> 00:02:43,033
Así que puedes ver que ya tienes una, dos, tres, cuatro marcas y

34
00:02:43,033 --> 00:02:46,300
la quinta está justo debajo de este pulgar aquí.

35
00:02:46,300 --> 00:02:49,943
Así y también cuando se muestra la vista del pulgar,

36
00:02:49,943 --> 00:02:54,346
mostrará el corte en la calificación seleccionada como el.

37
00:02:59,650 --> 00:03:06,047
Por lo tanto, esto tiene que ser etiquetado en diapositiva angular de componente que incluya

38
00:03:06,047 --> 00:03:12,252
en su fuente y esto le permitirá seleccionar la calificación para el plato.

39
00:03:12,252 --> 00:03:15,820
Por lo tanto, esta es su primera tarea en esta tarea.

40
00:03:16,880 --> 00:03:22,530
Su segunda tarea es agregar validación de formularios para este formulario.

41
00:03:22,530 --> 00:03:28,589
Ahora esta forma debe ser creada usando fuentes reactivas angulares y

42
00:03:28,589 --> 00:03:34,200
también usando los cambios de valor observables con el fin de observar

43
00:03:34,200 --> 00:03:39,377
cualquier cambio en cualquiera de estos elementos de control de forma ella.

44
00:03:39,377 --> 00:03:44,226
Y siempre que ocurra cualquier cambio, debe iniciar inmediatamente la validación del formulario

45
00:03:44,226 --> 00:03:48,831
usando los cambios de valor observables tal como lo hicimos en

46
00:03:48,831 --> 00:03:52,730
el ejercicio que acaba de completar en la lección anterior.

47
00:03:54,650 --> 00:03:59,370
Ahora, la validación que debe realizar es que tanto el nombre como

48
00:03:59,370 --> 00:04:02,020
el comentario son campos obligatorios.

49
00:04:02,020 --> 00:04:06,029
Además, el nombre debe contener al menos dos caracteres.

50
00:04:06,029 --> 00:04:11,671
Así que si solo escribo un carácter, entonces deberías mostrar un mensaje diciendo:

51
00:04:11,671 --> 00:04:15,283
Nombre del Autor debe tener al menos dos caracteres de longitud.

52
00:04:15,283 --> 00:04:19,250
Ahora si, por supuesto, escribimos más, entonces eso desaparecerá.

53
00:04:19,250 --> 00:04:23,494
Si elimina el nombre por completo del campo,

54
00:04:23,494 --> 00:04:28,760
mostrará un mensaje que dice: Nombre del autor es obligatorio.

55
00:04:28,760 --> 00:04:31,985
Por lo tanto, el mensaje requerido debe mostrarse aquí.

56
00:04:31,985 --> 00:04:35,327
Así que tan pronto como escriba al menos dos caracteres,

57
00:04:35,327 --> 00:04:38,610
entonces el mensaje desaparecerá.

58
00:04:38,610 --> 00:04:42,051
Ahora para el campo de comentario también, este es un campo obligatorio.

59
00:04:42,051 --> 00:04:46,029
Por lo tanto, debe escribir al menos unos pocos caracteres.

60
00:04:46,029 --> 00:04:49,159
No hay restricción en el número de caracteres.

61
00:04:49,159 --> 00:04:54,586
Pero si no se escribe ningún carácter cuando se muestra el mensaje aquí diciendo,

62
00:04:54,586 --> 00:04:56,980
comente según sea necesario.

63
00:04:56,980 --> 00:05:02,966
Si su formulario no es válido actualmente, entonces su botón de envío no funcionará.

64
00:05:02,966 --> 00:05:08,006
Pero una vez que su formulario sea válido, entonces su botón de envío funcionará y

65
00:05:08,006 --> 00:05:10,707
debería permitirle enviar la fuente.

66
00:05:10,707 --> 00:05:15,160
Por lo tanto, esa es la segunda tarea en su asignación.

67
00:05:16,170 --> 00:05:23,060
La tarea difícil en su tarea es que tan pronto como el formulario tenga información válida,

68
00:05:23,060 --> 00:05:28,240
debe mostrar una vista previa de lo que acaba de enviar en el formulario.

69
00:05:28,240 --> 00:05:33,310
Déjame escribir algo más significativo aquí, para que sean

70
00:05:33,310 --> 00:05:38,460
vista previa parece interesante.

71
00:05:38,460 --> 00:05:43,550
Así que verás que tan pronto como escribes información válida en tu formulario,

72
00:05:43,550 --> 00:05:48,440
deberías mostrar una vista previa de cómo será el comentario

73
00:05:48,440 --> 00:05:53,210
si se añade a esa lista de comentarios para el plato.

74
00:05:53,210 --> 00:05:57,712
Ahora observe que en la vista previa, aún no tiene la fecha mostrada.

75
00:05:57,712 --> 00:06:01,046
Por lo tanto, eso es otra cosa que debes tener en cuenta.

76
00:06:01,046 --> 00:06:08,027
Si el formulario no es válido, la vista previa desaparece.

77
00:06:08,027 --> 00:06:13,020
Pero tan pronto como el formulario sea válido, la vista previa volverá a aparecer.

78
00:06:13,020 --> 00:06:18,850
Por lo tanto, esto es algo que debe diseñar apropiadamente usando la lista ND y

79
00:06:18,850 --> 00:06:26,190
asegurándose de que el formulario sea válido antes de mostrar esta información allí.

80
00:06:26,190 --> 00:06:27,044
Entonces, esa es la vista previa.

81
00:06:27,044 --> 00:06:30,676
Ahora, cuando el usuario hace clic en el botón Enviar,

82
00:06:30,676 --> 00:06:34,370
entonces hay algunas cosas que necesita hacer.

83
00:06:34,370 --> 00:06:39,344
Cuando el usuario haga clic en el botón Enviar, entonces este comentario será

84
00:06:39,344 --> 00:06:44,589
añadido a la lista de comentarios que tiene para este plato en particular.

85
00:06:44,589 --> 00:06:50,943
Por lo tanto, permítanme hacer clic en el botón de enviar y se dará cuenta inmediatamente de que el formulario

86
00:06:50,943 --> 00:06:56,490
ha sido agregado a la lista de comentarios para este plato en particular.

87
00:06:56,490 --> 00:07:01,349
Entonces, verá que el último comentario que acabo de ingresar se ha agregado aquí.

88
00:07:01,349 --> 00:07:05,632
También tenga en cuenta que la fecha de

89
00:07:05,632 --> 00:07:13,140
el formulario se ha añadido en el comentario aquí.

90
00:07:13,140 --> 00:07:18,612
Así que se supone que debe tomar los valores del modelo de formulario y

91
00:07:18,612 --> 00:07:24,084
luego copiarlo en un modelo de datos, y luego empujar el comentario

92
00:07:24,084 --> 00:07:30,009
en el rayo de objetos JavaScript de comentarios para el objeto dish.

93
00:07:30,009 --> 00:07:34,553
Entonces, eso es algo que debe hacer usando el método de inserción de matriz para

94
00:07:34,553 --> 00:07:36,960
matriz de objetos JavaScript.

95
00:07:36,960 --> 00:07:41,534
Además, la fecha debe configurarse automáticamente y

96
00:07:41,534 --> 00:07:43,574
añadirse a ese modelo de datos.

97
00:07:43,574 --> 00:07:48,510
Recuerde que el modelo de formulario no contiene la fecha, sino

98
00:07:48,510 --> 00:07:54,800
el modelo de datos que se deriva de la clase de comentario que hemos diseñado,

99
00:07:54,800 --> 00:08:01,500
el modelo de datos contiene el autor, la calificación, el comentario y la fecha.

100
00:08:01,500 --> 00:08:05,642
Por lo tanto, debe agregar la fecha en el modelo de datos.

101
00:08:05,642 --> 00:08:11,261
Por lo tanto, aquí es donde hará uso de la clase de fecha Java Script

102
00:08:11,261 --> 00:08:16,370
junto con convertirla a una cadena ISO

103
00:08:16,370 --> 00:08:24,060
antes de almacenar en el campo de fecha de su modelo de datos de comentario.

104
00:08:24,060 --> 00:08:29,164
Ahora le he proporcionado enlaces a ejemplos de cómo puede

105
00:08:29,164 --> 00:08:34,268
crear fecha y cómo puede convertir la fecha en una cadena ISO

106
00:08:34,268 --> 00:08:39,148
en la documentación para esta asignación,

107
00:08:39,148 --> 00:08:44,158
y también en los recursos adicionales para este elemento.

108
00:08:44,158 --> 00:08:48,904
Así que, por favor, busque eso para entender cómo se supone que

109
00:08:48,904 --> 00:08:52,530
agregue la fecha a ese campo de comentarios allí.

110
00:08:52,530 --> 00:08:56,989
Y una vez que el comentario se introduce en la matriz de comentarios,

111
00:08:56,989 --> 00:09:02,176
se unirá al resto de los comentarios para ese plato en particular.

112
00:09:02,176 --> 00:09:06,600
Tienes que recordar que no estamos guardando esto en el lado del servidor,

113
00:09:06,600 --> 00:09:09,129
porque no tenemos un lado del servidor.

114
00:09:09,129 --> 00:09:13,330
Así que si vuelves a cargar tu página, ese comentario desaparecerá.

115
00:09:13,330 --> 00:09:15,040
Eso es perfectamente aceptable.

116
00:09:15,040 --> 00:09:19,417
En esta etapa, no estamos tratando de guardar los cambios en

117
00:09:19,417 --> 00:09:23,810
el plato de vuelta al servidor a través de nuestro servicio de plato.

118
00:09:23,810 --> 00:09:27,542
Eso haremos en uno de los ciclos posteriores.

119
00:09:27,542 --> 00:09:31,811
Así que en este momento, si recargas esta página, el comentario que acabas de introducir

120
00:09:31,811 --> 00:09:35,240
desaparecerá, pero eso es perfectamente aceptable.

121
00:09:35,240 --> 00:09:38,670
Por lo tanto, esta es la tercera tarea en su tarea.

122
00:09:39,720 --> 00:09:45,197
Después de completar las tres tareas, asegúrese de que todo funcione correctamente

123
00:09:45,197 --> 00:09:50,602
antes de enviar la solución de asignación a su sistema.

124
00:09:50,602 --> 00:09:54,269
[MÚSICA]