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

2
00:00:04,598 --> 00:00:10,170
Zeit, zum dritten Auftrag in diesem Kurs zu gehen.

3
00:00:10,170 --> 00:00:13,410
In dieser Aufgabe

4
00:00:13,410 --> 00:00:17,190
werden wir, wie Sie vielleicht bereits erwartet haben, Winkelformen und Observables betrachten.

5
00:00:17,190 --> 00:00:22,480
Das haben wir in diesem speziellen Modul des Kurses gelernt.

6
00:00:22,480 --> 00:00:28,600
In dieser Zuweisung entwerfen Sie ein Formular

7
00:00:28,600 --> 00:00:33,440
in der Ansicht „Detailkomponenten“, mit

8
00:00:33,440 --> 00:00:38,540
dem die Benutzer ihren Kommentar zu einem bestimmten Gericht absenden können.

9
00:00:39,640 --> 00:00:45,504
Sie verwenden angular reaktive Formulare, um das Formular zu entwerfen, und

10
00:00:45,504 --> 00:00:50,127
Sie werden die beobachtbaren Wertänderungen verwenden,

11
00:00:50,127 --> 00:00:53,623
um die Formularvalidierung zu initiieren,

12
00:00:53,623 --> 00:00:59,147
genau wie wir es in der Übung getan haben, die Sie gerade abgeschlossen haben, und

13
00:00:59,147 --> 00:01:04,109
Sie werden eine neue Winkel-Materialkomponente namens

14
00:01:04,109 --> 00:01:07,747
Angular Material verwenden Schieberegler-Komponente.

15
00:01:07,747 --> 00:01:13,987
Die Schiebereglerkomponente wird verwendet, um die Bewertung für

16
00:01:13,987 --> 00:01:19,050
das Gericht von der Person einzugeben, die die Zählung einreicht.

17
00:01:20,230 --> 00:01:24,620
Schauen wir uns die drei Aufgaben in dieser Zuordnung ein wenig genauer an.

18
00:01:26,410 --> 00:01:31,760
Hier zeige ich Ihnen also ihr erstes Gericht aus dem Menü,

19
00:01:31,760 --> 00:01:38,510
um Ihnen die drei Aufgaben zu veranschaulichen, die in diesem Auftrag erledigt werden müssen.

20
00:01:38,510 --> 00:01:43,238
In dieser Zuordnung erstellen wir also ein Formular

21
00:01:43,238 --> 00:01:48,594
im Kommentarbereich Ihrer Gericht-Detailkomponente.

22
00:01:48,594 --> 00:01:51,579
Das Formular enthält hier zwei Felder.

23
00:01:51,579 --> 00:01:55,122
Das Namensfeld und ein Kommentarfeld.

24
00:01:55,122 --> 00:02:00,570
Im Feld Name wird der Name des Autors für den Kommentar vom Benutzer eingegeben.

25
00:02:00,570 --> 00:02:04,406
Dann in ihrem Kommentarfeld, das ein Textbereich ist,

26
00:02:04,406 --> 00:02:10,037
erlauben Sie dem Autor, den Kommentar einzugeben, den er einreichen möchte.

27
00:02:10,037 --> 00:02:14,639
Um die Bewertung für die Schale zu erhalten,

28
00:02:14,639 --> 00:02:22,010
verwenden wir zusätzlich diese Winkel-Materialkomponente, die als Winkelmaterialschieber bezeichnet wird.

29
00:02:22,010 --> 00:02:23,730
Für diese Schiebereglerkomponente

30
00:02:25,040 --> 00:02:30,260
wird in den zusätzlichen Ressourcen ein Link zur Dokumentation bereitgestellt.

31
00:02:30,260 --> 00:02:33,541
Die Schiebereglerkomponente ist ziemlich einfach zu erstellen.

32
00:02:33,541 --> 00:02:38,788
Für diese Schiebereglerkomponente werden die Teilstriche wie folgt angezeigt.

33
00:02:38,788 --> 00:02:43,033
So können Sie sehen, dass Sie bereits ein, zwei, drei, vier Teilstriche haben und

34
00:02:43,033 --> 00:02:46,300
der fünfte ist direkt unter diesem Daumen hier.

35
00:02:46,300 --> 00:02:49,943
Also und auch, wenn Sie die Daumenansicht

36
00:02:49,943 --> 00:02:54,346
zeigen, wird es den Schnitt in der ausgewählten Bewertung wie die.

37
00:02:59,650 --> 00:03:06,047
Also, dies muss in Winkelfolie der Komponente beschriftet werden, die Sie

38
00:03:06,047 --> 00:03:12,252
in ihre Schriftart aufnehmen, und dies ermöglicht Ihnen, die Bewertung für das Gericht auszuwählen.

39
00:03:12,252 --> 00:03:15,820
Also, das ist Ihre erste Aufgabe in diesem Auftrag.

40
00:03:16,880 --> 00:03:22,530
Ihre zweite Aufgabe besteht darin, eine Formularüberprüfung für dieses Formular hinzuzufügen.

41
00:03:22,530 --> 00:03:28,589
Jetzt sollte dieses Formular mit Angular reaktive Schriftarten erstellt werden und

42
00:03:28,589 --> 00:03:34,200
auch die Werteänderungen beobachtbar verwenden,

43
00:03:34,200 --> 00:03:39,377
um Änderungen an einem dieser Formular-Steuerelemente zu beobachten sie.

44
00:03:39,377 --> 00:03:44,226
Und wenn eine Änderung auftritt, sollten Sie sofort die

45
00:03:44,226 --> 00:03:48,831
Formularüberprüfung mit den Wertänderungen einleiten, die genau so beobachtet werden können, wie wir es in

46
00:03:48,831 --> 00:03:52,730
der Übung gemacht haben, die Sie gerade in der vorherigen Lektion abgeschlossen haben.

47
00:03:54,650 --> 00:03:59,370
Nun müssen Sie die Validierung durchführen, dass sowohl der Name als auch

48
00:03:59,370 --> 00:04:02,020
der Kommentar Pflichtfelder sind.

49
00:04:02,020 --> 00:04:06,029
Außerdem sollte der Name mindestens zwei Zeichen enthalten.

50
00:04:06,029 --> 00:04:11,671
Wenn ich also nur ein Zeichen eintippe, dann sollten Sie hier eine Meldung anzeigen, die besagt, dass der

51
00:04:11,671 --> 00:04:15,283
Autorenname mindestens zwei Zeichen lang sein muss.

52
00:04:15,283 --> 00:04:19,250
Nun, wenn wir natürlich mehr eingeben, dann wird das verschwinden.

53
00:04:19,250 --> 00:04:23,494
Wenn Sie den Namen vollständig aus dem Feld entfernen,

54
00:04:23,494 --> 00:04:28,760
wird eine Meldung angezeigt, dass Autorenname erforderlich ist.

55
00:04:28,760 --> 00:04:31,985
Daher sollte hier die erforderliche Meldung angezeigt werden.

56
00:04:31,985 --> 00:04:35,327
Sobald ich also mindestens zwei Zeichen eintippe,

57
00:04:35,327 --> 00:04:38,610
verschwindet die Nachricht.

58
00:04:38,610 --> 00:04:42,051
Nun ist dies auch für das Kommentarfeld ein Pflichtfeld.

59
00:04:42,051 --> 00:04:46,029
Sie müssen also mindestens ein paar Zeichen eingeben.

60
00:04:46,029 --> 00:04:49,159
Es gibt keine Einschränkung für die Anzahl der Zeichen.

61
00:04:49,159 --> 00:04:54,586
Aber wenn keine Zeichen eingegeben werden, wenn Sie die Meldung hier sagen,

62
00:04:54,586 --> 00:04:56,980
kommentieren Sie wie erforderlich.

63
00:04:56,980 --> 00:05:02,966
Wenn Ihr Formular derzeit ungültig ist, funktioniert die Schaltfläche „Senden“ nicht.

64
00:05:02,966 --> 00:05:08,006
Sobald Ihr Formular jedoch gültig ist, funktioniert die Schaltfläche „Senden“ und

65
00:05:08,006 --> 00:05:10,707
sollte es Ihnen ermöglichen, die Schriftart zu senden.

66
00:05:10,707 --> 00:05:15,160
Das ist also die zweite Aufgabe in Ihrem Auftrag.

67
00:05:16,170 --> 00:05:23,060
Die schwierige Aufgabe in Ihrem Auftrag besteht darin, dass

68
00:05:23,060 --> 00:05:28,240
Sie, sobald das Formular gültige Informationen enthält, eine Vorschau dessen anzeigen sollten, was Sie gerade im Formular eingereicht haben.

69
00:05:28,240 --> 00:05:33,310
Lassen Sie mich hier etwas Bedeutsameres eingeben, so dass sie

70
00:05:33,310 --> 00:05:38,460
Vorschau interessant aussieht.

71
00:05:38,460 --> 00:05:43,550
Sie sehen also, dass Sie, sobald Sie gültige Informationen in Ihr Formular eingeben,

72
00:05:43,550 --> 00:05:48,440
eine Vorschau anzeigen sollten, wie der Kommentar

73
00:05:48,440 --> 00:05:53,210
aussehen wird, wenn er in die Liste der Kommentare für das Gericht aufgenommen wird.

74
00:05:53,210 --> 00:05:57,712
Beachten Sie nun, dass in der Vorschau das Datum noch nicht angezeigt wird.

75
00:05:57,712 --> 00:06:01,046
Also, das ist eine andere Sache, die Sie im Auge behalten müssen.

76
00:06:01,046 --> 00:06:08,027
Wenn das Formular ungültig wird, verschwindet die Vorschau.

77
00:06:08,027 --> 00:06:13,020
Sobald das Formular gültig ist, wird die Vorschau jedoch wieder angezeigt.

78
00:06:13,020 --> 00:06:18,850
Dies ist also etwas, das Sie entsprechend entwerfen sollten, indem Sie die ND-Liste verwenden und

79
00:06:18,850 --> 00:06:26,190
dann sicherstellen, dass das Formular gültig ist, bevor Sie diese Informationen dort anzeigen.

80
00:06:26,190 --> 00:06:27,044
Also, das ist die Vorschau.

81
00:06:27,044 --> 00:06:30,676
Jetzt, wenn der Benutzer auf die Schaltfläche Senden klickt,

82
00:06:30,676 --> 00:06:34,370
dann gibt es ein paar Dinge, die Sie tun müssen.

83
00:06:34,370 --> 00:06:39,344
Wenn der Benutzer auf die Schaltfläche Senden klickt, wird dieser Kommentar

84
00:06:39,344 --> 00:06:44,589
in die Liste der Kommentare hinzugefügt, die Sie für dieses spezielle Gericht haben.

85
00:06:44,589 --> 00:06:50,943
Also, lassen Sie mich auf die Schaltfläche „Senden“ klicken und Sie werden sofort feststellen, dass das Formular

86
00:06:50,943 --> 00:06:56,490
in die Liste der Kommentare für dieses spezielle Gericht aufgenommen wurde.

87
00:06:56,490 --> 00:07:01,349
Sie sehen also, dass der letzte Kommentar, den ich gerade eingegeben habe, hier hinzugefügt wurde.

88
00:07:01,349 --> 00:07:05,632
Beachten Sie auch, dass

89
00:07:05,632 --> 00:07:13,140
das Datum für das Formular hier in den Kommentar eingefügt wurde.

90
00:07:13,140 --> 00:07:18,612
Sie sollten also die Werte aus dem Formularmodell nehmen und

91
00:07:18,612 --> 00:07:24,084
sie dann in ein Datenmodell kopieren, und dann den Kommentar

92
00:07:24,084 --> 00:07:30,009
in den JavaScript-Objektstrahl von Kommentaren für das Dish-Objekt schieben.

93
00:07:30,009 --> 00:07:34,553
Also, das ist etwas, das Sie mit der Array-Push-Methode für

94
00:07:34,553 --> 00:07:36,960
JavaScript-Objekt-Array tun müssen.

95
00:07:36,960 --> 00:07:41,534
Darüber hinaus sollte das Datum automatisch konfiguriert und

96
00:07:41,534 --> 00:07:43,574
diesem Datenmodell hinzugefügt werden.

97
00:07:43,574 --> 00:07:48,510
Denken Sie daran, dass das Formularmodell nicht das Datum enthält, sondern

98
00:07:48,510 --> 00:07:54,800
das Datenmodell, das von der von uns entworfenen Kommentarklasse abgeleitet wird,

99
00:07:54,800 --> 00:08:01,500
das Datenmodell enthält den Autor, die Bewertung, den Kommentar und das Datum.

100
00:08:01,500 --> 00:08:05,642
Sie müssen also das Datum dem Datenmodell hinzufügen.

101
00:08:05,642 --> 00:08:11,261
Hier verwenden Sie also die

102
00:08:11,261 --> 00:08:16,370
Java-Script-Datumsklasse zusammen mit der Umwandlung in eine

103
00:08:16,370 --> 00:08:24,060
ISO-Zeichenfolge, bevor Sie in das Datumsfeld Ihres Kommentardatenmodells speichern.

104
00:08:24,060 --> 00:08:29,164
Jetzt habe ich Ihnen Links zu Beispielen zur Verfügung gestellt, wie Sie

105
00:08:29,164 --> 00:08:34,268
Datum erstellen können und wie Sie das Datum in eine

106
00:08:34,268 --> 00:08:39,148
ISO-Zeichenfolge in der Dokumentation für diese Zuordnung

107
00:08:39,148 --> 00:08:44,158
und auch in den zusätzlichen Ressourcen für diesen Artikel konvertieren können.

108
00:08:44,158 --> 00:08:48,904
Also, bitte schauen Sie das nach oben, um zu verstehen, wie Sie

109
00:08:48,904 --> 00:08:52,530
das Datum zu diesem Kommentarfeld hinzufügen sollen.

110
00:08:52,530 --> 00:08:56,989
Und sobald der Kommentar in das Array der Kommentare geschoben wird,

111
00:08:56,989 --> 00:09:02,176
dann wird er den Rest der Kommentare für dieses bestimmte Gericht beitreten.

112
00:09:02,176 --> 00:09:06,600
Sie müssen sich daran erinnern, dass wir dies nicht auf der Serverseite speichern,

113
00:09:06,600 --> 00:09:09,129
da wir keine Serverseite haben.

114
00:09:09,129 --> 00:09:13,330
Wenn Sie also Ihre Seite neu laden, wird dieser Kommentar verschwinden.

115
00:09:13,330 --> 00:09:15,040
Das ist durchaus akzeptabel.

116
00:09:15,040 --> 00:09:19,417
In diesem Stadium versuchen wir nicht, die Änderungen an

117
00:09:19,417 --> 00:09:23,810
der Schale über unseren Geschirrservice auf den Server zu speichern.

118
00:09:23,810 --> 00:09:27,542
Das werden wir in einem der späteren Zyklen tun.

119
00:09:27,542 --> 00:09:31,811
In diesem Moment, wenn Sie diese Seite neu laden, wird der Kommentar, den Sie gerade eingeben

120
00:09:31,811 --> 00:09:35,240
, verschwinden, aber das ist durchaus akzeptabel.

121
00:09:35,240 --> 00:09:38,670
Dies ist also die dritte Aufgabe in Ihrem Auftrag.

122
00:09:39,720 --> 00:09:45,197
Nachdem Sie alle drei Aufgaben abgeschlossen haben, stellen Sie sicher, dass alles

123
00:09:45,197 --> 00:09:50,602
korrekt funktioniert, bevor Sie die Zuweisungslösung an ihr System senden.

124
00:09:50,602 --> 00:09:54,269
( MUSIK)