[MUSIC]
Il est temps de passer à la troisième affectation de ce cours.
Dans cette mission, comme vous l'avez peut-être déjà prévu,
nous examinerons les formes angulaires et les observables.
C'est ce que nous avons appris dans ce module particulier du cours.
Dans cette mission, vous allez concevoir un formulaire
dans la vue des composants de plat qui permettra à
les utilisateurs de soumettre leur commentaire sur un plat spécifique.
Vous utiliserez des formes réactives angulaires pour concevoir le formulaire et
vous utiliserez les changements de valeur observables dans
afin d'initier la validation du formulaire,
comme nous l'avons fait dans l'exercice que vous venez de terminer et
vous utiliserez un nouveau composant matériel angulaire appelé
Angular Composant de curseur de matériau.
Le composant curseur sera utilisé pour entrer l'évaluation pour
le plat par la personne qui soumet le décompte.
Regardons un peu plus en détail les trois tâches de cette mission.
Donc ici, je vous montre leur premier plat du menu dans l'ordre
pour vous illustrer les trois tâches qui doivent être accomplies dans cette mission.
Donc, dans cette mission, nous allons créer un formulaire dans
la section commentaire de votre composant de détail plat.
Le formulaire contient deux champs ici.
Champ de nom et champ de commentaire.
Dans le champ Nom, le nom de l'auteur du commentaire sera saisi par l'utilisateur.
Ensuite, dans leur champ de commentaire qui est une zone de texte,
, vous autoriserez l'auteur à entrer le commentaire qu'il souhaite soumettre.
De plus, afin d'obtenir la cote pour le plat,
, nous utiliserons ce composant de matériau angulaire appelé curseur de matériau angulaire.
Pour ce composant de curseur,
un lien vers la documentation est fourni dans les ressources supplémentaires.
Le composant curseur est assez simple à créer.
Pour ce composant de curseur, vous afficherez les coches comme ceci.
Donc vous pouvez voir que vous avez déjà une, deux, trois, quatre marques de graduation et
la cinquième est juste sous ce pouce ici.
Ainsi, et aussi quand vous affichez la vue du pouce,
il montrera la coupe dans la cote sélectionnée comme le.
Donc, cela doit être étiqueté dans la diapositive angulaire du composant que vous incluez
dans leur police et cela vous permettra de sélectionner la cote pour le plat.
Donc, c'est votre première tâche dans cette mission.
Votre deuxième tâche consiste à ajouter la validation du formulaire pour ce formulaire.
Maintenant, ce formulaire devrait être créé en utilisant des polices réactives angulaires et
également en utilisant les changements de valeur observables afin d'observer
tout changement à l'un de ces éléments de contrôle de formulaire elle.
Et chaque fois qu'un changement se produit, vous devez immédiatement lancer la validation du formulaire
en utilisant les changements de valeur observables comme nous l'avons fait dans
l'exercice que vous venez de terminer dans la leçon précédente.
Maintenant, la validation que vous devez effectuer est que le nom et
le commentaire sont des champs obligatoires.
De plus, le nom doit contenir au moins deux caractères.
Donc, si je saisis juste un caractère, alors vous devriez montrer un message ici disant,
Nom de l'auteur doit avoir au moins deux caractères de long.
Maintenant, si bien sûr, nous tapons plus, alors ça disparaîtra.
Si vous supprimez complètement le nom du champ,
alors vous affichez un message indiquant : Nom de l'auteur est requis.
Donc, le message requis doit être affiché ici.
Donc dès que je taperai au moins deux caractères,
alors le message disparaîtra.
Maintenant, pour le champ de commentaire aussi, il s'agit d'un champ obligatoire.
Donc, vous devez taper au moins quelques caractères.
Il n'y a aucune restriction sur le nombre de caractères.
Mais si aucun caractère n'est tapé lorsque vous affichez un message disant,
commenter comme requis.
Si votre formulaire n'est pas valide actuellement, votre bouton d'envoi ne fonctionnera pas.
Mais une fois que votre formulaire sera valide, votre bouton d'envoi fonctionnera et
devrait vous permettre de soumettre la police.
Donc, c'est la deuxième tâche de votre mission.
La tâche difficile dans votre mission est que dès que le formulaire contient des informations valides,
vous devriez afficher un aperçu de ce que vous venez de soumettre dans le formulaire.
Laissez-moi taper quelque chose de plus significatif ici, afin qu'ils soient
aperçu semble intéressant.
Donc, vous voyez que dès que vous tapez des informations valides dans votre formulaire,
vous devriez montrer un aperçu de ce à quoi ressemblera le commentaire
s'il est ajouté à cette liste de commentaires pour le plat.
Maintenant, notez que dans l'aperçu, vous n'avez pas encore la date affichée.
Donc, c'est une autre chose que vous devez garder à l'esprit.
Si le formulaire devient invalide, l'aperçu disparaît.
Mais dès que le formulaire sera valide, l'aperçu réapparaîtra.
Donc, c'est quelque chose que vous devriez concevoir de manière appropriée en utilisant la liste ND et
puis en vous assurant que le formulaire est valide avant d'y afficher ces informations.
Donc, c'est l'aperçu.
Maintenant, lorsque l'utilisateur clique sur le bouton Soumettre,
alors il y a quelques choses que vous devez faire.
Lorsque l'utilisateur clique sur le bouton Soumettre, alors ce commentaire sera
ajouté dans la liste des commentaires que vous avez pour ce plat particulier.
Alors, laissez-moi cliquer sur le bouton soumettre et vous remarquerez immédiatement que le formulaire
a été ajouté dans la liste des commentaires pour ce plat particulier.
Donc, vous voyez que le dernier commentaire que je viens d'entrer a été ajouté ici.
Notez également que la date pour
le formulaire a été ajoutée dans le commentaire ici.
Donc, vous êtes censé prendre les valeurs du modèle de formulaire et
puis le copier dans un modèle de données, puis vous poussez le commentaire
dans le rayon d'objets JavaScript de commentaires pour l'objet plat.
Donc, c'est quelque chose que vous devez faire en utilisant la méthode push de tableau pour le tableau d'objets JavaScript
.
De plus, la date doit être automatiquement configurée et
ajoutée à ce modèle de données.
Rappelez-vous que le modèle de formulaire ne contient pas la date, mais
le modèle de données dérivé de la classe de commentaires que nous avons conçue,
le modèle de données contient l'auteur, l'évaluation, le commentaire et la date.
Donc, vous devez ajouter la date dans le modèle de données.
Donc, c'est là que vous allez utiliser la classe de date Java Script
avec la convertir en une chaîne ISO
avant de stocker dans le champ de date de votre modèle de données de commentaire.
Maintenant, je vous ai fourni des liens vers des exemples de comment vous pouvez
créer la date et comment vous pouvez convertir la date en une chaîne ISO
dans la documentation pour cette affectation,
et aussi dans les ressources supplémentaires pour cet article.
Alors, s'il vous plaît regardez cela pour comprendre comment vous êtes censé
ajouter la date à ce champ de commentaire là-bas.
Et une fois que le commentaire est poussé dans le tableau des commentaires,
alors il rejoindra le reste des commentaires pour ce plat particulier.
Vous devez vous rappeler que nous ne sauvegardons pas ceci côté serveur,
parce que nous n'avons pas de côté serveur.
Donc, si vous rechargez votre page, ce commentaire disparaîtra.
C'est tout à fait acceptable.
À ce stade, nous n'essayons pas de sauvegarder les modifications apportées à
le plat au serveur via notre service de plat.
Que nous ferons dans un des cycles ultérieurs.
Donc, en ce moment, si vous rechargez cette page, le commentaire que vous venez d'entrer disparaîtra
, mais c'est parfaitement acceptable.
Donc, c'est la troisième tâche de votre mission.
Après avoir terminé les trois tâches, assurez-vous que tout fonctionne correctement
avant de soumettre la solution d'affectation à leur système.
[MUSIQUE]