[MUSIK]
Zeit, zum dritten Auftrag in diesem Kurs zu gehen.
In dieser Aufgabe
werden wir, wie Sie vielleicht bereits erwartet haben, Winkelformen und Observables betrachten.
Das haben wir in diesem speziellen Modul des Kurses gelernt.
In dieser Zuweisung entwerfen Sie ein Formular
in der Ansicht „Detailkomponenten“, mit
dem die Benutzer ihren Kommentar zu einem bestimmten Gericht absenden können.
Sie verwenden angular reaktive Formulare, um das Formular zu entwerfen, und
Sie werden die beobachtbaren Wertänderungen verwenden,
um die Formularvalidierung zu initiieren,
genau wie wir es in der Übung getan haben, die Sie gerade abgeschlossen haben, und
Sie werden eine neue Winkel-Materialkomponente namens
Angular Material verwenden Schieberegler-Komponente.
Die Schiebereglerkomponente wird verwendet, um die Bewertung für
das Gericht von der Person einzugeben, die die Zählung einreicht.
Schauen wir uns die drei Aufgaben in dieser Zuordnung ein wenig genauer an.
Hier zeige ich Ihnen also ihr erstes Gericht aus dem Menü,
um Ihnen die drei Aufgaben zu veranschaulichen, die in diesem Auftrag erledigt werden müssen.
In dieser Zuordnung erstellen wir also ein Formular
im Kommentarbereich Ihrer Gericht-Detailkomponente.
Das Formular enthält hier zwei Felder.
Das Namensfeld und ein Kommentarfeld.
Im Feld Name wird der Name des Autors für den Kommentar vom Benutzer eingegeben.
Dann in ihrem Kommentarfeld, das ein Textbereich ist,
erlauben Sie dem Autor, den Kommentar einzugeben, den er einreichen möchte.
Um die Bewertung für die Schale zu erhalten,
verwenden wir zusätzlich diese Winkel-Materialkomponente, die als Winkelmaterialschieber bezeichnet wird.
Für diese Schiebereglerkomponente
wird in den zusätzlichen Ressourcen ein Link zur Dokumentation bereitgestellt.
Die Schiebereglerkomponente ist ziemlich einfach zu erstellen.
Für diese Schiebereglerkomponente werden die Teilstriche wie folgt angezeigt.
So können Sie sehen, dass Sie bereits ein, zwei, drei, vier Teilstriche haben und
der fünfte ist direkt unter diesem Daumen hier.
Also und auch, wenn Sie die Daumenansicht
zeigen, wird es den Schnitt in der ausgewählten Bewertung wie die.
Also, dies muss in Winkelfolie der Komponente beschriftet werden, die Sie
in ihre Schriftart aufnehmen, und dies ermöglicht Ihnen, die Bewertung für das Gericht auszuwählen.
Also, das ist Ihre erste Aufgabe in diesem Auftrag.
Ihre zweite Aufgabe besteht darin, eine Formularüberprüfung für dieses Formular hinzuzufügen.
Jetzt sollte dieses Formular mit Angular reaktive Schriftarten erstellt werden und
auch die Werteänderungen beobachtbar verwenden,
um Änderungen an einem dieser Formular-Steuerelemente zu beobachten sie.
Und wenn eine Änderung auftritt, sollten Sie sofort die
Formularüberprüfung mit den Wertänderungen einleiten, die genau so beobachtet werden können, wie wir es in
der Übung gemacht haben, die Sie gerade in der vorherigen Lektion abgeschlossen haben.
Nun müssen Sie die Validierung durchführen, dass sowohl der Name als auch
der Kommentar Pflichtfelder sind.
Außerdem sollte der Name mindestens zwei Zeichen enthalten.
Wenn ich also nur ein Zeichen eintippe, dann sollten Sie hier eine Meldung anzeigen, die besagt, dass der
Autorenname mindestens zwei Zeichen lang sein muss.
Nun, wenn wir natürlich mehr eingeben, dann wird das verschwinden.
Wenn Sie den Namen vollständig aus dem Feld entfernen,
wird eine Meldung angezeigt, dass Autorenname erforderlich ist.
Daher sollte hier die erforderliche Meldung angezeigt werden.
Sobald ich also mindestens zwei Zeichen eintippe,
verschwindet die Nachricht.
Nun ist dies auch für das Kommentarfeld ein Pflichtfeld.
Sie müssen also mindestens ein paar Zeichen eingeben.
Es gibt keine Einschränkung für die Anzahl der Zeichen.
Aber wenn keine Zeichen eingegeben werden, wenn Sie die Meldung hier sagen,
kommentieren Sie wie erforderlich.
Wenn Ihr Formular derzeit ungültig ist, funktioniert die Schaltfläche „Senden“ nicht.
Sobald Ihr Formular jedoch gültig ist, funktioniert die Schaltfläche „Senden“ und
sollte es Ihnen ermöglichen, die Schriftart zu senden.
Das ist also die zweite Aufgabe in Ihrem Auftrag.
Die schwierige Aufgabe in Ihrem Auftrag besteht darin, dass
Sie, sobald das Formular gültige Informationen enthält, eine Vorschau dessen anzeigen sollten, was Sie gerade im Formular eingereicht haben.
Lassen Sie mich hier etwas Bedeutsameres eingeben, so dass sie
Vorschau interessant aussieht.
Sie sehen also, dass Sie, sobald Sie gültige Informationen in Ihr Formular eingeben,
eine Vorschau anzeigen sollten, wie der Kommentar
aussehen wird, wenn er in die Liste der Kommentare für das Gericht aufgenommen wird.
Beachten Sie nun, dass in der Vorschau das Datum noch nicht angezeigt wird.
Also, das ist eine andere Sache, die Sie im Auge behalten müssen.
Wenn das Formular ungültig wird, verschwindet die Vorschau.
Sobald das Formular gültig ist, wird die Vorschau jedoch wieder angezeigt.
Dies ist also etwas, das Sie entsprechend entwerfen sollten, indem Sie die ND-Liste verwenden und
dann sicherstellen, dass das Formular gültig ist, bevor Sie diese Informationen dort anzeigen.
Also, das ist die Vorschau.
Jetzt, wenn der Benutzer auf die Schaltfläche Senden klickt,
dann gibt es ein paar Dinge, die Sie tun müssen.
Wenn der Benutzer auf die Schaltfläche Senden klickt, wird dieser Kommentar
in die Liste der Kommentare hinzugefügt, die Sie für dieses spezielle Gericht haben.
Also, lassen Sie mich auf die Schaltfläche „Senden“ klicken und Sie werden sofort feststellen, dass das Formular
in die Liste der Kommentare für dieses spezielle Gericht aufgenommen wurde.
Sie sehen also, dass der letzte Kommentar, den ich gerade eingegeben habe, hier hinzugefügt wurde.
Beachten Sie auch, dass
das Datum für das Formular hier in den Kommentar eingefügt wurde.
Sie sollten also die Werte aus dem Formularmodell nehmen und
sie dann in ein Datenmodell kopieren, und dann den Kommentar
in den JavaScript-Objektstrahl von Kommentaren für das Dish-Objekt schieben.
Also, das ist etwas, das Sie mit der Array-Push-Methode für
JavaScript-Objekt-Array tun müssen.
Darüber hinaus sollte das Datum automatisch konfiguriert und
diesem Datenmodell hinzugefügt werden.
Denken Sie daran, dass das Formularmodell nicht das Datum enthält, sondern
das Datenmodell, das von der von uns entworfenen Kommentarklasse abgeleitet wird,
das Datenmodell enthält den Autor, die Bewertung, den Kommentar und das Datum.
Sie müssen also das Datum dem Datenmodell hinzufügen.
Hier verwenden Sie also die
Java-Script-Datumsklasse zusammen mit der Umwandlung in eine
ISO-Zeichenfolge, bevor Sie in das Datumsfeld Ihres Kommentardatenmodells speichern.
Jetzt habe ich Ihnen Links zu Beispielen zur Verfügung gestellt, wie Sie
Datum erstellen können und wie Sie das Datum in eine
ISO-Zeichenfolge in der Dokumentation für diese Zuordnung
und auch in den zusätzlichen Ressourcen für diesen Artikel konvertieren können.
Also, bitte schauen Sie das nach oben, um zu verstehen, wie Sie
das Datum zu diesem Kommentarfeld hinzufügen sollen.
Und sobald der Kommentar in das Array der Kommentare geschoben wird,
dann wird er den Rest der Kommentare für dieses bestimmte Gericht beitreten.
Sie müssen sich daran erinnern, dass wir dies nicht auf der Serverseite speichern,
da wir keine Serverseite haben.
Wenn Sie also Ihre Seite neu laden, wird dieser Kommentar verschwinden.
Das ist durchaus akzeptabel.
In diesem Stadium versuchen wir nicht, die Änderungen an
der Schale über unseren Geschirrservice auf den Server zu speichern.
Das werden wir in einem der späteren Zyklen tun.
In diesem Moment, wenn Sie diese Seite neu laden, wird der Kommentar, den Sie gerade eingeben
, verschwinden, aber das ist durchaus akzeptabel.
Dies ist also die dritte Aufgabe in Ihrem Auftrag.
Nachdem Sie alle drei Aufgaben abgeschlossen haben, stellen Sie sicher, dass alles
korrekt funktioniert, bevor Sie die Zuweisungslösung an ihr System senden.
( MUSIK)