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

2
00:00:04,598 --> 00:00:10,170
Il est temps de passer à la troisième affectation de ce cours.

3
00:00:10,170 --> 00:00:13,410
Dans cette mission, comme vous l'avez peut-être déjà prévu,

4
00:00:13,410 --> 00:00:17,190
nous examinerons les formes angulaires et les observables.

5
00:00:17,190 --> 00:00:22,480
C'est ce que nous avons appris dans ce module particulier du cours.

6
00:00:22,480 --> 00:00:28,600
Dans cette mission, vous allez concevoir un formulaire

7
00:00:28,600 --> 00:00:33,440
dans la vue des composants de plat qui permettra à

8
00:00:33,440 --> 00:00:38,540
les utilisateurs de soumettre leur commentaire sur un plat spécifique.

9
00:00:39,640 --> 00:00:45,504
Vous utiliserez des formes réactives angulaires pour concevoir le formulaire et

10
00:00:45,504 --> 00:00:50,127
vous utiliserez les changements de valeur observables dans

11
00:00:50,127 --> 00:00:53,623
afin d'initier la validation du formulaire,

12
00:00:53,623 --> 00:00:59,147
comme nous l'avons fait dans l'exercice que vous venez de terminer et

13
00:00:59,147 --> 00:01:04,109
vous utiliserez un nouveau composant matériel angulaire appelé

14
00:01:04,109 --> 00:01:07,747
Angular Composant de curseur de matériau.

15
00:01:07,747 --> 00:01:13,987
Le composant curseur sera utilisé pour entrer l'évaluation pour

16
00:01:13,987 --> 00:01:19,050
le plat par la personne qui soumet le décompte.

17
00:01:20,230 --> 00:01:24,620
Regardons un peu plus en détail les trois tâches de cette mission.

18
00:01:26,410 --> 00:01:31,760
Donc ici, je vous montre leur premier plat du menu dans l'ordre

19
00:01:31,760 --> 00:01:38,510
pour vous illustrer les trois tâches qui doivent être accomplies dans cette mission.

20
00:01:38,510 --> 00:01:43,238
Donc, dans cette mission, nous allons créer un formulaire dans

21
00:01:43,238 --> 00:01:48,594
la section commentaire de votre composant de détail plat.

22
00:01:48,594 --> 00:01:51,579
Le formulaire contient deux champs ici.

23
00:01:51,579 --> 00:01:55,122
Champ de nom et champ de commentaire.

24
00:01:55,122 --> 00:02:00,570
Dans le champ Nom, le nom de l'auteur du commentaire sera saisi par l'utilisateur.

25
00:02:00,570 --> 00:02:04,406
Ensuite, dans leur champ de commentaire qui est une zone de texte,

26
00:02:04,406 --> 00:02:10,037
, vous autoriserez l'auteur à entrer le commentaire qu'il souhaite soumettre.

27
00:02:10,037 --> 00:02:14,639
De plus, afin d'obtenir la cote pour le plat,

28
00:02:14,639 --> 00:02:22,010
, nous utiliserons ce composant de matériau angulaire appelé curseur de matériau angulaire.

29
00:02:22,010 --> 00:02:23,730
Pour ce composant de curseur,

30
00:02:25,040 --> 00:02:30,260
un lien vers la documentation est fourni dans les ressources supplémentaires.

31
00:02:30,260 --> 00:02:33,541
Le composant curseur est assez simple à créer.

32
00:02:33,541 --> 00:02:38,788
Pour ce composant de curseur, vous afficherez les coches comme ceci.

33
00:02:38,788 --> 00:02:43,033
Donc vous pouvez voir que vous avez déjà une, deux, trois, quatre marques de graduation et

34
00:02:43,033 --> 00:02:46,300
la cinquième est juste sous ce pouce ici.

35
00:02:46,300 --> 00:02:49,943
Ainsi, et aussi quand vous affichez la vue du pouce,

36
00:02:49,943 --> 00:02:54,346
il montrera la coupe dans la cote sélectionnée comme le.

37
00:02:59,650 --> 00:03:06,047
Donc, cela doit être étiqueté dans la diapositive angulaire du composant que vous incluez

38
00:03:06,047 --> 00:03:12,252
dans leur police et cela vous permettra de sélectionner la cote pour le plat.

39
00:03:12,252 --> 00:03:15,820
Donc, c'est votre première tâche dans cette mission.

40
00:03:16,880 --> 00:03:22,530
Votre deuxième tâche consiste à ajouter la validation du formulaire pour ce formulaire.

41
00:03:22,530 --> 00:03:28,589
Maintenant, ce formulaire devrait être créé en utilisant des polices réactives angulaires et

42
00:03:28,589 --> 00:03:34,200
également en utilisant les changements de valeur observables afin d'observer

43
00:03:34,200 --> 00:03:39,377
tout changement à l'un de ces éléments de contrôle de formulaire elle.

44
00:03:39,377 --> 00:03:44,226
Et chaque fois qu'un changement se produit, vous devez immédiatement lancer la validation du formulaire

45
00:03:44,226 --> 00:03:48,831
en utilisant les changements de valeur observables comme nous l'avons fait dans

46
00:03:48,831 --> 00:03:52,730
l'exercice que vous venez de terminer dans la leçon précédente.

47
00:03:54,650 --> 00:03:59,370
Maintenant, la validation que vous devez effectuer est que le nom et

48
00:03:59,370 --> 00:04:02,020
le commentaire sont des champs obligatoires.

49
00:04:02,020 --> 00:04:06,029
De plus, le nom doit contenir au moins deux caractères.

50
00:04:06,029 --> 00:04:11,671
Donc, si je saisis juste un caractère, alors vous devriez montrer un message ici disant,

51
00:04:11,671 --> 00:04:15,283
Nom de l'auteur doit avoir au moins deux caractères de long.

52
00:04:15,283 --> 00:04:19,250
Maintenant, si bien sûr, nous tapons plus, alors ça disparaîtra.

53
00:04:19,250 --> 00:04:23,494
Si vous supprimez complètement le nom du champ,

54
00:04:23,494 --> 00:04:28,760
alors vous affichez un message indiquant : Nom de l'auteur est requis.

55
00:04:28,760 --> 00:04:31,985
Donc, le message requis doit être affiché ici.

56
00:04:31,985 --> 00:04:35,327
Donc dès que je taperai au moins deux caractères,

57
00:04:35,327 --> 00:04:38,610
alors le message disparaîtra.

58
00:04:38,610 --> 00:04:42,051
Maintenant, pour le champ de commentaire aussi, il s'agit d'un champ obligatoire.

59
00:04:42,051 --> 00:04:46,029
Donc, vous devez taper au moins quelques caractères.

60
00:04:46,029 --> 00:04:49,159
Il n'y a aucune restriction sur le nombre de caractères.

61
00:04:49,159 --> 00:04:54,586
Mais si aucun caractère n'est tapé lorsque vous affichez un message disant,

62
00:04:54,586 --> 00:04:56,980
commenter comme requis.

63
00:04:56,980 --> 00:05:02,966
Si votre formulaire n'est pas valide actuellement, votre bouton d'envoi ne fonctionnera pas.

64
00:05:02,966 --> 00:05:08,006
Mais une fois que votre formulaire sera valide, votre bouton d'envoi fonctionnera et

65
00:05:08,006 --> 00:05:10,707
devrait vous permettre de soumettre la police.

66
00:05:10,707 --> 00:05:15,160
Donc, c'est la deuxième tâche de votre mission.

67
00:05:16,170 --> 00:05:23,060
La tâche difficile dans votre mission est que dès que le formulaire contient des informations valides,

68
00:05:23,060 --> 00:05:28,240
vous devriez afficher un aperçu de ce que vous venez de soumettre dans le formulaire.

69
00:05:28,240 --> 00:05:33,310
Laissez-moi taper quelque chose de plus significatif ici, afin qu'ils soient

70
00:05:33,310 --> 00:05:38,460
aperçu semble intéressant.

71
00:05:38,460 --> 00:05:43,550
Donc, vous voyez que dès que vous tapez des informations valides dans votre formulaire,

72
00:05:43,550 --> 00:05:48,440
vous devriez montrer un aperçu de ce à quoi ressemblera le commentaire

73
00:05:48,440 --> 00:05:53,210
s'il est ajouté à cette liste de commentaires pour le plat.

74
00:05:53,210 --> 00:05:57,712
Maintenant, notez que dans l'aperçu, vous n'avez pas encore la date affichée.

75
00:05:57,712 --> 00:06:01,046
Donc, c'est une autre chose que vous devez garder à l'esprit.

76
00:06:01,046 --> 00:06:08,027
Si le formulaire devient invalide, l'aperçu disparaît.

77
00:06:08,027 --> 00:06:13,020
Mais dès que le formulaire sera valide, l'aperçu réapparaîtra.

78
00:06:13,020 --> 00:06:18,850
Donc, c'est quelque chose que vous devriez concevoir de manière appropriée en utilisant la liste ND et

79
00:06:18,850 --> 00:06:26,190
puis en vous assurant que le formulaire est valide avant d'y afficher ces informations.

80
00:06:26,190 --> 00:06:27,044
Donc, c'est l'aperçu.

81
00:06:27,044 --> 00:06:30,676
Maintenant, lorsque l'utilisateur clique sur le bouton Soumettre,

82
00:06:30,676 --> 00:06:34,370
alors il y a quelques choses que vous devez faire.

83
00:06:34,370 --> 00:06:39,344
Lorsque l'utilisateur clique sur le bouton Soumettre, alors ce commentaire sera

84
00:06:39,344 --> 00:06:44,589
ajouté dans la liste des commentaires que vous avez pour ce plat particulier.

85
00:06:44,589 --> 00:06:50,943
Alors, laissez-moi cliquer sur le bouton soumettre et vous remarquerez immédiatement que le formulaire

86
00:06:50,943 --> 00:06:56,490
a été ajouté dans la liste des commentaires pour ce plat particulier.

87
00:06:56,490 --> 00:07:01,349
Donc, vous voyez que le dernier commentaire que je viens d'entrer a été ajouté ici.

88
00:07:01,349 --> 00:07:05,632
Notez également que la date pour

89
00:07:05,632 --> 00:07:13,140
le formulaire a été ajoutée dans le commentaire ici.

90
00:07:13,140 --> 00:07:18,612
Donc, vous êtes censé prendre les valeurs du modèle de formulaire et

91
00:07:18,612 --> 00:07:24,084
puis le copier dans un modèle de données, puis vous poussez le commentaire

92
00:07:24,084 --> 00:07:30,009
dans le rayon d'objets JavaScript de commentaires pour l'objet plat.

93
00:07:30,009 --> 00:07:34,553
Donc, c'est quelque chose que vous devez faire en utilisant la méthode push de tableau pour le tableau d'objets JavaScript

94
00:07:34,553 --> 00:07:36,960
.

95
00:07:36,960 --> 00:07:41,534
De plus, la date doit être automatiquement configurée et

96
00:07:41,534 --> 00:07:43,574
ajoutée à ce modèle de données.

97
00:07:43,574 --> 00:07:48,510
Rappelez-vous que le modèle de formulaire ne contient pas la date, mais

98
00:07:48,510 --> 00:07:54,800
le modèle de données dérivé de la classe de commentaires que nous avons conçue,

99
00:07:54,800 --> 00:08:01,500
le modèle de données contient l'auteur, l'évaluation, le commentaire et la date.

100
00:08:01,500 --> 00:08:05,642
Donc, vous devez ajouter la date dans le modèle de données.

101
00:08:05,642 --> 00:08:11,261
Donc, c'est là que vous allez utiliser la classe de date Java Script

102
00:08:11,261 --> 00:08:16,370
avec la convertir en une chaîne ISO

103
00:08:16,370 --> 00:08:24,060
avant de stocker dans le champ de date de votre modèle de données de commentaire.

104
00:08:24,060 --> 00:08:29,164
Maintenant, je vous ai fourni des liens vers des exemples de comment vous pouvez

105
00:08:29,164 --> 00:08:34,268
créer la date et comment vous pouvez convertir la date en une chaîne ISO

106
00:08:34,268 --> 00:08:39,148
dans la documentation pour cette affectation,

107
00:08:39,148 --> 00:08:44,158
et aussi dans les ressources supplémentaires pour cet article.

108
00:08:44,158 --> 00:08:48,904
Alors, s'il vous plaît regardez cela pour comprendre comment vous êtes censé

109
00:08:48,904 --> 00:08:52,530
ajouter la date à ce champ de commentaire là-bas.

110
00:08:52,530 --> 00:08:56,989
Et une fois que le commentaire est poussé dans le tableau des commentaires,

111
00:08:56,989 --> 00:09:02,176
alors il rejoindra le reste des commentaires pour ce plat particulier.

112
00:09:02,176 --> 00:09:06,600
Vous devez vous rappeler que nous ne sauvegardons pas ceci côté serveur,

113
00:09:06,600 --> 00:09:09,129
parce que nous n'avons pas de côté serveur.

114
00:09:09,129 --> 00:09:13,330
Donc, si vous rechargez votre page, ce commentaire disparaîtra.

115
00:09:13,330 --> 00:09:15,040
C'est tout à fait acceptable.

116
00:09:15,040 --> 00:09:19,417
À ce stade, nous n'essayons pas de sauvegarder les modifications apportées à

117
00:09:19,417 --> 00:09:23,810
le plat au serveur via notre service de plat.

118
00:09:23,810 --> 00:09:27,542
Que nous ferons dans un des cycles ultérieurs.

119
00:09:27,542 --> 00:09:31,811
Donc, en ce moment, si vous rechargez cette page, le commentaire que vous venez d'entrer disparaîtra

120
00:09:31,811 --> 00:09:35,240
, mais c'est parfaitement acceptable.

121
00:09:35,240 --> 00:09:38,670
Donc, c'est la troisième tâche de votre mission.

122
00:09:39,720 --> 00:09:45,197
Après avoir terminé les trois tâches, assurez-vous que tout fonctionne correctement

123
00:09:45,197 --> 00:09:50,602
avant de soumettre la solution d'affectation à leur système.

124
00:09:50,602 --> 00:09:54,269
[MUSIQUE]