1
00:00:03,550 --> 00:00:08,265
Mit einem kurzen Verständnis von Winkelreaktiven Formen

2
00:00:08,265 --> 00:00:10,670
fahren wir mit der nächsten Übung fort.

3
00:00:10,670 --> 00:00:12,800
In dieser Übung werden wir

4
00:00:12,800 --> 00:00:18,705
eine Winkelreaktive Form in der Winkelanwendung erstellen, an der wir bisher gearbeitet haben.

5
00:00:18,705 --> 00:00:25,480
Auf dem Weg werden wir unser Verständnis von Angular Reactive Forms festigen.

6
00:00:25,480 --> 00:00:28,435
Um mit der Übung zu beginnen,

7
00:00:28,435 --> 00:00:31,560
ist der allererste Schritt, den wir tun müssen,

8
00:00:31,560 --> 00:00:35,860
das Angular Reactive Forms Modul in unser App-Modul zu importieren.

9
00:00:35,860 --> 00:00:38,020
Also, lassen Sie uns zum App-Modul gehen,

10
00:00:38,020 --> 00:00:42,160
und dann sehen wir, dass wir das Formularmodul bereits früher importiert hatten.

11
00:00:42,160 --> 00:00:46,540
Wir werden auch das Angular Reactive Forms Modul importieren.

12
00:00:46,540 --> 00:00:49,145
Also, ich werde das kopieren, das hier einfügen

13
00:00:49,145 --> 00:00:53,810
und dann in das Angular Reactive Forms Modul ändern.

14
00:00:53,810 --> 00:00:57,770
Nachdem wir das getan haben, müssen wir das auch in unseren Dekorateur aufnehmen.

15
00:00:57,770 --> 00:01:00,440
Also, wenn ich hier zum Dekorator gehe,

16
00:01:00,440 --> 00:01:05,235
werde ich das Reaktive Formularmodul in den Dekorator importieren.

17
00:01:05,235 --> 00:01:09,365
Zwei weitere Module, die wir für

18
00:01:09,365 --> 00:01:14,245
unser Formular importieren müssen, sind das MatSelectModule und das MatslideLoggleModule.

19
00:01:14,245 --> 00:01:19,035
Das select-Modul ermöglicht es uns, das select-Element zu verwenden,

20
00:01:19,035 --> 00:01:24,360
und das SlideToggle ermöglicht es uns, den SlideToggle in unserem Formular zu verwenden.

21
00:01:24,360 --> 00:01:26,750
Also, um dies zu tun, geben wir

22
00:01:26,750 --> 00:01:35,670
Import MatSelectModule aus Winkel/Material/select ein

23
00:01:36,890 --> 00:01:45,220
und importieren MatslideToggleModule aus Winkel/Material/Slide-Toggle,

24
00:01:47,110 --> 00:01:55,195
und dann müssen wir sie zu unserem ngModel Dekorator in den Importen hinzufügen.

25
00:01:55,195 --> 00:01:57,145
Also, da unten,

26
00:01:57,145 --> 00:02:02,840
lassen Sie mich das MatSelectModule und MatslideLoggleModule dort importieren.

27
00:02:02,840 --> 00:02:04,685
Mit diesen Änderungen

28
00:02:04,685 --> 00:02:08,240
ist unser App-Modul nun bereit, um es uns zu ermöglichen,

29
00:02:08,240 --> 00:02:13,465
das Reactive Forms Modul in unserer Anwendung zu verwenden.

30
00:02:13,465 --> 00:02:14,920
Im nächsten Schritt,

31
00:02:14,920 --> 00:02:22,105
was ich tun werde, ist, hier eine Klasse zu erstellen, die als Feedback bezeichnet wird.

32
00:02:22,105 --> 00:02:28,265
Also, ich werde es im freigegebenen Ordner im Dateinamen feedback.ts erstellen.

33
00:02:28,265 --> 00:02:34,790
Nun ist dies die Struktur der Klasse, die

34
00:02:34,790 --> 00:02:38,210
das Datenmodell darstellt, das dem Formularmodell entspricht, das wir

35
00:02:38,210 --> 00:02:41,840
innerhalb unserer Angular-Anwendung verwenden werden.

36
00:02:41,840 --> 00:02:50,620
Also erstelle ich die Klasse mit dem Namen feedback.

37
00:02:51,210 --> 00:02:53,500
Innerhalb der Feedback-Klasse

38
00:02:53,500 --> 00:02:57,160
werde ich ein paar Eigenschaften einschließen;

39
00:02:57,970 --> 00:03:02,830
Vorname, Nachname,

40
00:03:02,830 --> 00:03:10,730
dann Telefonnummer, Telnum, E-Mail,

41
00:03:10,730 --> 00:03:20,440
dann stimme ich zu, was eine boolesche Variable,

42
00:03:20,440 --> 00:03:28,385
boolesche Eigenschaft, contacttype, der vom Typ string ist.

43
00:03:28,385 --> 00:03:31,730
Es wird Ihnen klarer werden, warum ich all

44
00:03:31,730 --> 00:03:36,145
diese einschließe, wenn wir uns das Formulardesign selbst ansehen.

45
00:03:36,145 --> 00:03:42,350
Diese spezielle Feedback-Klasse entspricht dem Feedback, das

46
00:03:42,350 --> 00:03:48,045
ein Nutzer über unser Restaurant innerhalb unserer Angular-Anwendung einreichen kann.

47
00:03:48,045 --> 00:03:51,800
Das ist der Grund, warum ich diese Feedback-Klasse erstelle.

48
00:03:51,800 --> 00:03:55,865
Wir werden dies in das Formularmodell in

49
00:03:55,865 --> 00:04:00,650
einer der Komponenten dort abbilden und außerdem

50
00:04:00,650 --> 00:04:05,920
werde ich eine Konstante exportieren, die ein String-Array namens

51
00:04:05,920 --> 00:04:12,380
contacttype ist, das, wie ich

52
00:04:12,380 --> 00:04:19,410
erwähnt habe, ein String-Array ist, das hier drei Strings enthält

53
00:04:25,060 --> 00:04:29,460
, keine, Tel und E-Mail.

54
00:04:29,750 --> 00:04:34,875
Also, jetzt ist unsere Datenmodellstruktur bereit.

55
00:04:34,875 --> 00:04:39,019
Später, wenn wir unsere serverseitige Entwicklung entwickeln,

56
00:04:39,019 --> 00:04:45,555
können wir dies in Daten abbilden, die wir auf der serverseitigen Seite speichern.

57
00:04:45,555 --> 00:04:47,690
Also, innerhalb unserer Angular-Anwendung

58
00:04:47,690 --> 00:04:53,705
bildet dies das Datenmodell, das wir für unsere Anwendung verwenden werden, genau wie das Gericht, der

59
00:04:53,705 --> 00:04:58,850
Führer, und die Förderung, die wir entwickelt haben, ist eine andere Klasse, die

60
00:04:58,850 --> 00:05:04,375
es uns ermöglicht, eine Reihe von Eigenschaften in einer Klasse hier zu gruppieren.

61
00:05:04,375 --> 00:05:06,380
Sobald wir das abgeschlossen haben,

62
00:05:06,380 --> 00:05:10,365
lassen Sie uns mit der Erstellung des Reaktiven Formulars fortfahren.

63
00:05:10,365 --> 00:05:16,095
Wir werden das reaktive Formular in unserer Kontaktkomponente erstellen.

64
00:05:16,095 --> 00:05:20,780
Also, lassen Sie uns auf die Kontaktkomponente.ts Datei gehen,

65
00:05:20,780 --> 00:05:22,520
und wir werden auch

66
00:05:22,520 --> 00:05:26,400
das entsprechende Formular in die Kontaktkomponenten-Vorlagendatei aufnehmen.

67
00:05:26,400 --> 00:05:29,475
Also, in der Kontaktkomponenten Typ Skriptdatei,

68
00:05:29,475 --> 00:05:32,135
also hier werden wir unser Formular vorbereiten,

69
00:05:32,135 --> 00:05:35,555
da wir sahen, dass das reaktive Formular hauptsächlich

70
00:05:35,555 --> 00:05:43,265
im Code gebaut und dann in die Formularelemente in der Vorlagendatei abgebildet ist.

71
00:05:43,265 --> 00:05:49,360
Also, hier werde ich ein paar Klassen importieren.

72
00:05:49,360 --> 00:05:52,655
Ich importiere FormBuilder,

73
00:05:52,655 --> 00:06:00,055
dann FormBuilder und Validatoren.

74
00:06:00,055 --> 00:06:05,890
Validatoren würden für die Formularüberprüfung verwendet werden, die in der nächsten Übung sein wird,

75
00:06:05,890 --> 00:06:10,125
aber ich werde sie im Moment bereits importieren.

76
00:06:10,125 --> 00:06:15,735
Diese werden aus der Angular Forms Library importiert.

77
00:06:15,735 --> 00:06:19,300
Sobald wir dies importieren, importieren wir

78
00:06:19,300 --> 00:06:29,790
die Feedback-Klasse und die Contacttype-Konstante

79
00:06:29,790 --> 00:06:38,360
aus der Shared/Feedback-Datei

80
00:06:38,360 --> 00:06:41,415
, die wir gerade im vorherigen Schritt erstellt haben.

81
00:06:41,415 --> 00:06:44,850
Wir brauchen dies innerhalb unserer Anwendung.

82
00:06:44,850 --> 00:06:49,455
Jetzt, in meiner Klasse hier,

83
00:06:49,455 --> 00:07:00,310
werde ich ein paar Variablen namens FeedbackForm deklarieren, die vom Typ FormGroup ist.

84
00:07:00,410 --> 00:07:07,475
Dies ist das Formularmodell, das

85
00:07:07,475 --> 00:07:11,960
das Reaktive Formular hier hosten wird und dann werde ich auch

86
00:07:11,960 --> 00:07:17,270
eine variable Rückmeldung vom Typ Feedback deklarieren,

87
00:07:17,270 --> 00:07:19,745
also wäre dies das entsprechende Datenmodell.

88
00:07:19,745 --> 00:07:27,930
Später kann dieser Feedback-Wert von einem Server innerhalb unserer Anwendung abgerufen

89
00:07:27,930 --> 00:07:34,205
werden, und dann werde ich auch den contacttype als Variable deklarieren

90
00:07:34,205 --> 00:07:41,045
, die vom contacttype string array ist.

91
00:07:41,045 --> 00:07:44,860
Weil ich dies innerhalb unserer Anwendung nutzen muss.

92
00:07:44,860 --> 00:07:48,675
Um das reaktive Formular innerhalb des Konstruktors zu konstruieren,

93
00:07:48,675 --> 00:07:58,605
würde ich den FormBuilder hier in den Konstruktor injizieren,

94
00:07:58,605 --> 00:08:03,605
und ich würde eine separate Methode namens

95
00:08:03,605 --> 00:08:08,950
CreateForm erstellen, die ich innerhalb des Konstruktors aufrufen werde.

96
00:08:08,950 --> 00:08:12,300
Wenn diese Klasse erstellt wird, wird das Formular erstellt.

97
00:08:12,300 --> 00:08:17,870
Das CreateForm wird also eine Methode sein, in der ich das eigentliche Formular erstellen werde.

98
00:08:17,870 --> 00:08:24,060
Lassen Sie mich hier die CreateForm-Methode hinzufügen.

99
00:08:24,060 --> 00:08:27,590
Dies ist nur Bequemlichkeit, den ich

100
00:08:27,590 --> 00:08:31,250
einfach den Code direkt in den Konstruktor selbst einfügen könnte,

101
00:08:31,250 --> 00:08:34,760
aber Sie werden sehen, dass es Gründe geben könnte, warum Sie

102
00:08:34,760 --> 00:08:41,060
dieses CreateForm von anderen Orten aufrufen müssen.

103
00:08:41,060 --> 00:08:47,240
Also, es ist besser, es hier in eine separate Methode zu setzen.

104
00:08:47,240 --> 00:08:50,830
Also, ich werde das Formular hier erstellen,

105
00:08:50,830 --> 00:08:56,775
reaktives Formular, und dann in die FeedbackForm-Variable einfügen, die ich zuvor deklariert habe.

106
00:08:56,775 --> 00:08:58,335
Um das Formular zu erstellen,

107
00:08:58,335 --> 00:09:02,215
nehme ich die Hilfe des FormBuilders, des

108
00:09:02,215 --> 00:09:05,145
FB, das ich im Konstruktor deklariert habe,

109
00:09:05,145 --> 00:09:10,760
und dann bietet die FB eine Methode namens Group, mit der ich

110
00:09:10,760 --> 00:09:16,910
hier eine Gruppe definieren kann, eine FormGroup.

111
00:09:16,910 --> 00:09:23,040
Also, da drin, jetzt werde ich die Teile der Form dort konstruieren.

112
00:09:23,040 --> 00:09:24,845
Also, innerhalb dieser Gruppe,

113
00:09:24,845 --> 00:09:28,775
jetzt kann ich die verschiedenen Formular-Steuerelemente dort einfügen.

114
00:09:28,775 --> 00:09:34,050
Also würde ich zuerst den Vornamen und

115
00:09:34,050 --> 00:09:44,200
dann den Nachnamen setzen.

116
00:09:45,910 --> 00:09:51,175
Beachten Sie, wie die Felder in meinem Formular

117
00:09:51,175 --> 00:09:56,460
die Felder in meiner Feedback-Klasse genau spiegeln.

118
00:09:56,460 --> 00:10:01,630
Sie müssen nicht genau übereinstimmen, aber wenn sie übereinstimmen,

119
00:10:01,630 --> 00:10:06,550
wird die Übertragung der Daten zwischen dem Datenmodell und den vier Modellen viel einfacher.

120
00:10:06,550 --> 00:10:12,500
Telnum, das ich verlassen werde, weil

121
00:10:13,040 --> 00:10:15,800
ich Vorname, Nachname,

122
00:10:15,800 --> 00:10:25,140
Telnum, E-Mail und zustimmen, und Kontakttyp hinzugefügt habe,

123
00:10:25,550 --> 00:10:31,360
die ich als keine festlegen werde. Denken Sie

124
00:10:31,360 --> 00:10:35,710
daran, dass der Kontakttyp ein String-Array ist, das drei von ihnen enthält,

125
00:10:35,710 --> 00:10:40,015
also sollten Sie einen von ihnen auswählen und ihn dann dieser Eigenschaft hier zuordnen.

126
00:10:40,015 --> 00:10:44,920
Also, ich werde dies als keine wählen und dann Nachricht,

127
00:10:44,920 --> 00:10:49,120
die das Feedback sein wird, das der Benutzer über

128
00:10:49,120 --> 00:10:53,605
unser Restaurant gibt, das hier in eine Zeichenfolge gemappt ist.

129
00:10:53,605 --> 00:10:59,765
Dies sind also die verschiedenen Felder, die Teil unseres Formulars hier sein werden.

130
00:10:59,765 --> 00:11:04,370
Also, sobald wir die Struktur des Formulars hier an Ort und Stelle haben,

131
00:11:04,370 --> 00:11:07,525
so dass Sie feststellen, dass, wenn

132
00:11:07,525 --> 00:11:12,455
diese Methode aufgerufen wird, wird dieses Formular die reaktive Form im Code hier erstellt werden.

133
00:11:12,455 --> 00:11:16,595
Jetzt müssen wir dies in die Ansicht,

134
00:11:16,595 --> 00:11:17,900
in die Vorlage dort abbilden.

135
00:11:17,900 --> 00:11:21,470
Also, wir werden das im nächsten Schritt tun.

136
00:11:21,470 --> 00:11:26,130
Also, jetzt, gehen wir zu unserer Vorlagendatei,

137
00:11:26,130 --> 00:11:31,415
in der Kontaktkomponenten-Vorlagendatei,

138
00:11:31,415 --> 00:11:36,159
werden wir nach unten scrollen und dann in

139
00:11:36,159 --> 00:11:42,910
unsere Vorlagendatei direkt nach diesem div hier einfügen,

140
00:11:42,910 --> 00:11:50,325
also haben wir dieses div in unserer Kontaktansicht, die die Standortinformationen enthält und so weiter.

141
00:11:50,325 --> 00:11:54,510
Gleich danach werde ich ein anderes div erstellen, in

142
00:11:54,510 --> 00:11:59,820
dem wir die reaktive Form dort hosten werden.

143
00:11:59,820 --> 00:12:17,720
Lassen Sie mich ein paar Flex-Layout-Dinge

144
00:12:17,720 --> 00:12:19,100
hier auf mein div anwenden.

145
00:12:19,100 --> 00:12:22,110
Nun, diese Formulargröße, wie Sie sehen können, sollte

146
00:12:22,110 --> 00:12:25,905
eine CSS-Klasse sein, die ich ein wenig später erstellen werde.

147
00:12:25,905 --> 00:12:31,540
In diesem div werde ich mein Formular hosten.

148
00:12:31,540 --> 00:12:36,680
Also, sobald ich dieses div in meine Vorlagendatei eingefügt habe,

149
00:12:36,680 --> 00:12:40,180
lassen Sie mich jetzt mit einer Überschrift dafür beginnen.

150
00:12:40,180 --> 00:12:47,675
Also sagen wir: „Senden Sie uns Ihr Feedback.“

151
00:12:47,675 --> 00:12:54,250
Also, Sie suchen das Feedback von Besuchern auf Ihrer Website.

152
00:12:54,950 --> 00:12:58,050
Wir beginnen mit der Konstruktion des Formulars.

153
00:12:58,050 --> 00:13:03,200
Also, lassen Sie mich mit dem Formular-Tag

154
00:13:03,200 --> 00:13:08,275
hier beginnen und dann werden wir das Formular in diesem Formular-Tag hier aufbauen.

155
00:13:08,275 --> 00:13:12,180
Also, für das Formular, das erste, was ich tun werde, ist

156
00:13:12,180 --> 00:13:16,535
das No Validate anzuwenden, weil die Validierung von eckig übernommen wird,

157
00:13:16,535 --> 00:13:21,380
und dann auch eine Formulargruppe hier anwenden.

158
00:13:21,380 --> 00:13:38,060
Beachten Sie also, dass diese Formulargruppe diejenige ist, die mich in das reaktive Formularmodell binden wird

159
00:13:38,060 --> 00:13:40,555
, das ich hier in meinem Code erstellt habe.

160
00:13:40,555 --> 00:13:42,380
So

161
00:13:42,380 --> 00:13:47,255
binden wir diese reaktive Form in der Vorlage an

162
00:13:47,255 --> 00:13:53,680
das entsprechende Formularmodell in unserer Typoskriptdatei dort.

163
00:13:53,680 --> 00:13:59,100
Die Art und Weise, wie wir das tun, ist, dass wir die Formulargruppe und das Feedback-Formular deklarieren.

164
00:13:59,100 --> 00:14:00,910
Ich zeige Ihnen, wie Sie

165
00:14:00,910 --> 00:14:04,840
die restlichen Formularelemente

166
00:14:04,840 --> 00:14:09,315
in kurzer Zeit an die entsprechenden Eigenschaften im Formularmodell binden.

167
00:14:09,315 --> 00:14:11,325
Also, nachdem wir dies getan haben,

168
00:14:11,325 --> 00:14:20,480
lassen Sie uns unsere Formularelemente in diesem Formularmodell platzieren.

169
00:14:20,480 --> 00:14:24,490
Also, ich werde hier ein P deklarieren und dann innen dort

170
00:14:24,490 --> 00:14:28,860
werde ich das Mat-Form-Feld hier verwenden,

171
00:14:28,860 --> 00:14:35,475
auf das ich eine CSS-Klasse namens Half-Width anwenden

172
00:14:35,475 --> 00:14:39,600
und dies abschließen werde.

173
00:14:39,600 --> 00:14:45,195
Das würde also meine erste Formularsteuerung hier einführen.

174
00:14:45,195 --> 00:14:55,930
Also, hier werde ich die Eingabe setzen und dann den MatInput aus eckigem Material hier anwenden.

175
00:14:56,930 --> 00:15:03,530
Um dies in die Eigenschaft in meinem Formularmodell

176
00:15:03,530 --> 00:15:08,630
zu binden, müsste ich FormControlName tun,

177
00:15:09,980 --> 00:15:14,650
und der erste ist der Vorname.

178
00:15:14,650 --> 00:15:20,370
Auf diese Weise ist diese Eingabe jetzt an die Vornamen-Eigenschaft gebunden

179
00:15:20,370 --> 00:15:26,015
, die ich in meinem Formularmodell definiert habe, das ich im Code definiert habe.

180
00:15:26,015 --> 00:15:29,680
Der Vorname, und dann werde ich

181
00:15:29,680 --> 00:15:37,900
den Platzhalter als Vorname definieren.

182
00:15:37,900 --> 00:15:39,970
Also, wie Sie erwarten würden,

183
00:15:39,970 --> 00:15:43,685
wird dieses Eingabefeld verwendet werden, um den

184
00:15:43,685 --> 00:15:51,215
Vornamen durch den Benutzer einzugeben, Text einzugeben.

185
00:15:51,215 --> 00:15:56,935
Interessanterweise sehen Sie, dass wir nicht

186
00:15:56,935 --> 00:16:02,950
mehr das ng-Modell hier oder eine der Template-Variablen und so weiter in meiner Form haben.

187
00:16:02,950 --> 00:16:05,945
Reaktive Formulare funktionieren anders.

188
00:16:05,945 --> 00:16:08,480
Wie Sie in reaktiven Formularen sehen,

189
00:16:08,480 --> 00:16:11,975
ordnen Sie die Formulargruppe zu und versuchen Sie dann die Namen des Formularsteuerelements.

190
00:16:11,975 --> 00:16:16,095
Wenn Sie Formularsteuerelemente mit der Formularsteuerklasse erstellen,

191
00:16:16,095 --> 00:16:20,440
deklarieren Sie dies als Formularsteuerelement in eckigen Klammern und passen Sie

192
00:16:20,440 --> 00:16:24,910
es dann mit dem entsprechenden Formularsteuerelement an, das Sie in Ihrem Typ skeptisch erstellen.

193
00:16:24,910 --> 00:16:28,940
Aber jetzt, da wir den Formulargenerator verwenden,

194
00:16:28,940 --> 00:16:33,280
muss ich nur die Formulargruppe wie

195
00:16:33,280 --> 00:16:38,605
diese in meiner Form an das entsprechende Formularmodell binden,

196
00:16:38,605 --> 00:16:39,890
und dann den Rest von ihnen

197
00:16:39,890 --> 00:16:42,690
deklariere ich als Formularsteuerelement Namen und sie dann mit

198
00:16:42,690 --> 00:16:45,085
den entsprechenden Eigenschaften im

199
00:16:45,085 --> 00:16:48,995
Formularsteuermodell dass ich in meinem Typoskript den Codeweg habe.

200
00:16:48,995 --> 00:16:53,950
Dies wird also das Vornamenfeld dort erstellen.

201
00:16:53,950 --> 00:16:56,400
Lassen Sie mich das kopieren.

202
00:16:56,400 --> 00:17:00,150
Ich brauche hier einen Nachnamen.

203
00:17:00,150 --> 00:17:07,005
Also, ich werde dies kopieren und dann sagen, Formularsteuerelement Name ist Nachname,

204
00:17:07,005 --> 00:17:10,510
und der Platzhalter ist Nachname,

205
00:17:10,510 --> 00:17:12,550
und der Typ, Text, hier.

206
00:17:12,550 --> 00:17:18,975
Ich hatte Vornamen,

207
00:17:18,975 --> 00:17:24,970
ich hatte Nachnamen und wenn Sie sich das Formularsteuermodell ansehen,

208
00:17:24,970 --> 00:17:27,400
werden Sie sehen, dass

209
00:17:27,400 --> 00:17:31,770
ich nach dem Vor- und Nachnamen die Telefonnummer als nächste habe,

210
00:17:31,770 --> 00:17:34,325
also werde ich das hier einfügen.

211
00:17:34,325 --> 00:17:38,390
Dann ist der Name des Formularsteuerelements hier Telnum,

212
00:17:38,390 --> 00:17:46,920
und der Platzhalter ist Telefonnummer,

213
00:17:46,920 --> 00:17:51,405
und der Typ ist Tel.

214
00:17:51,405 --> 00:17:53,385
Während wir dabei sind,

215
00:17:53,385 --> 00:17:59,905
werde ich das Erforderliche in diese binden, obwohl das nicht wirklich erforderlich ist.

216
00:17:59,905 --> 00:18:08,275
Aber lassen Sie mich das einfach hinzufügen.

217
00:18:08,275 --> 00:18:11,920
Nun, Telefonnummer, dann habe ich E-Mail.

218
00:18:11,920 --> 00:18:20,679
Also, das nächste Feld ist E-Mail,

219
00:18:25,520 --> 00:18:32,100
und der Platzhalter ist E-Mail,

220
00:18:32,100 --> 00:18:35,510
und der Typ ist auch.

221
00:18:35,510 --> 00:18:38,600
Also, jetzt habe ich

222
00:18:38,600 --> 00:18:41,610
Vorname, Nachname, Telefonnummer und E-Mail.

223
00:18:41,610 --> 00:18:52,820
Das nächste, was ich hinzufügen werde, ist ein Schieberegler.

224
00:18:53,850 --> 00:18:56,600
Früher verwenden wir das Kontrollkästchen.

225
00:18:56,600 --> 00:19:03,240
Das slidetoggle ist ein weiteres Formular-Steuerelement, das eckiges Material bietet,

226
00:19:03,240 --> 00:19:07,150
das etwas anders aussieht als das Kontrollkästchen und

227
00:19:07,150 --> 00:19:11,480
ich dachte, dass ich mit Ihnen illustrieren werde, indem ich es in der Form hier verwende.

228
00:19:11,480 --> 00:19:18,680
Nun, hier werde ich eine Tabelle verwenden, um diese Elemente zu positionieren.

229
00:19:19,890 --> 00:19:22,300
Der Grund dafür ist, dass

230
00:19:22,300 --> 00:19:25,520
diese Elemente ohne Verwendung einer Tabelle schwer zu positionieren sind.

231
00:19:25,520 --> 00:19:27,605
Also, in der Tabelle,

232
00:19:27,605 --> 00:19:31,740
ich bin sicher, dass Sie alle wissen, wie man Tabelle verwendet,

233
00:19:35,280 --> 00:19:39,740
ich habe versucht, sie mit dem

234
00:19:39,740 --> 00:19:44,970
Standard-Flex-Layout zu positionieren und war damit nicht sehr erfolgreich.

235
00:19:44,970 --> 00:19:50,510
Stattdessen griff ich auf eine Tabelle zurück, um diese beiden Elemente in meiner Form zu positionieren.

236
00:19:50,510 --> 00:19:54,350
Also, Mat-Schiebe-Toggle.

237
00:19:54,350 --> 00:19:57,680
Also, das Slidetoggle ist wie das Kontrollkästchen,

238
00:19:57,680 --> 00:20:00,390
Sie können es ein- und ausschalten,

239
00:20:00,390 --> 00:20:04,550
und dies ist erlaubt, einen booleschen Wert hier auszuwählen.

240
00:20:04,550 --> 00:20:14,200
Also, slidetoggle und der FormControlName ist einverstanden.

241
00:20:14,200 --> 00:20:16,140
Wenn Sie sich erinnern, hatten wir zustimmen,

242
00:20:16,140 --> 00:20:22,925
was eine boolesche Eigenschaft im Formular-Steuerelement war.

243
00:20:22,925 --> 00:20:25,735
Dann, würde ich sagen,

244
00:20:25,735 --> 00:20:29,340
können wir Sie kontaktieren?

245
00:20:29,340 --> 00:20:35,140
Jetzt wird es Ihnen klarer, wenn Sie die endgültige Version

246
00:20:35,140 --> 00:20:43,060
dieses Formulars sehen, um zu verstehen, warum wir dies tun.

247
00:20:43,060 --> 00:20:49,895
Im Moment werden wir einfach alle Teile in meine reaktive Form geben.

248
00:20:49,895 --> 00:20:55,925
Der zweite Teil werde ich eine Auswahl verwenden,

249
00:20:55,925 --> 00:21:03,920
die durch die Matten-Select-Komponente in Winkelmaterial unterstützt wird.

250
00:21:03,920 --> 00:21:12,460
Also, MD wählen und dafür den Platzhalter,

251
00:21:13,520 --> 00:21:21,690
werde ich als definieren „Wie?“

252
00:21:21,690 --> 00:21:27,580
und FormControlName, mit dem ich dies binden werde, ist

253
00:21:27,580 --> 00:21:37,650
„contacttype“ und schließen Sie die MD-Auswahl.

254
00:21:37,650 --> 00:21:41,720
Dies ermöglicht mir, ein select-Element in meinem Formular zu erstellen.

255
00:21:41,720 --> 00:21:44,660
Also, das select-Element ist etwas, das mir

256
00:21:44,660 --> 00:21:48,535
eine Pull-down-Liste gibt, aus der ich eine von ihnen auswählen kann.

257
00:21:48,535 --> 00:21:50,905
Um die Pull-Down-Liste

258
00:21:50,905 --> 00:22:00,510
zu erstellen, werde ich die mat-Option verwenden, die als Komponente in Winkelmaterial verfügbar ist.

259
00:22:00,510 --> 00:22:05,035
Also, die mat-Option ist in der mat-select enthalten.

260
00:22:05,035 --> 00:22:06,810
Also, für die Option,

261
00:22:06,810 --> 00:22:09,570
werde ich *ngFor tun,

262
00:22:09,570 --> 00:22:17,070
und ich bin sicher, dass Sie sich an die ngFo-Direktive von früher erinnern,

263
00:22:17,070 --> 00:22:24,750
*ngFor „Lassen Sie ctype von ContactType.“

264
00:22:24,750 --> 00:22:28,360
Jetzt sehen Sie, warum ich die Kontakttypvariable

265
00:22:28,360 --> 00:22:44,740
früher in meinem Code deklariert habe und dann würde ich sagen, [value] = „ctype“.

266
00:22:44,740 --> 00:23:00,840
Also, ich richte meine Option in meiner Auswahl hier ein und verwende Interpolation,

267
00:23:00,840 --> 00:23:03,040
ich gebe hier ctype ein.

268
00:23:03,040 --> 00:23:10,100
Also, das wird mir ein Pulldown-Optionsmenü in meiner Form geben.

269
00:23:10,100 --> 00:23:14,665
Also, das ist der nächste Teil und dann,

270
00:23:14,665 --> 00:23:21,270
nach dem Tisch, werde ich hier einen Textbereich einfügen.

271
00:23:21,270 --> 00:23:31,320
Also würde ich p sagen und das P schließen, um die reaktive Form zu stylen,

272
00:23:31,320 --> 00:23:35,395
erlaubt mir das P-Element, die Elemente richtig zu positionieren.

273
00:23:35,395 --> 00:23:37,580
Deshalb benutze ich das.

274
00:23:37,580 --> 00:23:42,380
Also, wie Sie sich erinnern,

275
00:23:42,540 --> 00:23:48,740
erlaubt mat-form-field mir,

276
00:23:48,740 --> 00:23:56,239
hier einen Eingabecontainer einzuschließen, und dann werde ich einen Textbereich definieren, auf den

277
00:23:56,239 --> 00:24:00,310
ich

278
00:24:00,310 --> 00:24:08,650
die MatInput-Direktive darauf anwende.

279
00:24:08,650 --> 00:24:15,460
Dann, die FormControlName, werde ich als „Nachricht“ geben.

280
00:24:15,460 --> 00:24:23,290
Dieses spezielle Formularelement ermöglicht es dem Benutzer,

281
00:24:23,290 --> 00:24:31,305
die Feedback-Nachricht für mein Restaurant einzugeben.

282
00:24:31,305 --> 00:24:37,100
Also, Platzhalter „Ihr Feedback“,

283
00:24:37,100 --> 00:24:42,610
und dann werde ich dem Textbereich eine Größe von

284
00:24:42,610 --> 00:24:51,245
12 Zeilen hier geben und dann den Textbereich schließen.

285
00:24:51,245 --> 00:24:58,005
Also, hier haben wir einen Textbereich mit den 12 Zeilen.

286
00:24:58,005 --> 00:25:03,350
Also, das vervollständigt den größten Teil des Formulars.

287
00:25:03,350 --> 00:25:07,910
Entschuldigung, das sollte außerhalb des Tisches sein.

288
00:25:08,070 --> 00:25:11,830
Wir brauchen einen Button, um das Formular zu senden.

289
00:25:11,830 --> 00:25:20,755
Also, genau dort werde ich eine Schaltfläche des Typs „submit“ einschließen und

290
00:25:20,755 --> 00:25:24,155
diese Schaltfläche einreichen werde ich

291
00:25:24,155 --> 00:25:32,270
den mat-Button anwenden und auch die class = = „background-primary“ anwenden.

292
00:25:33,600 --> 00:25:42,770
Sie haben gesehen, wie ich dies auf die Schaltfläche in der vorherigen Übung auch,

293
00:25:42,770 --> 00:25:45,740
ähnliche Art von Schaltfläche.

294
00:25:45,740 --> 00:25:48,510
Also, jetzt ist meine Form fast fertig.

295
00:25:48,510 --> 00:25:54,455
Sie könnten der Kontaktkomponente ein paar CSS-Klassen hinzufügen.

296
00:25:54,455 --> 00:25:58,725
Die drei Klassen, die ich verwendet habe, sind volle Breite,

297
00:25:58,725 --> 00:26:06,420
dies wird verwendet, um die Größe der Elemente dort festzulegen.

298
00:26:06,420 --> 00:26:10,980
Also, volle Breite 95 Prozent, halbe Breite.

299
00:26:11,200 --> 00:26:17,565
Dies erlaubt mir, die Elemente korrekt zu dimensionieren,

300
00:26:17,565 --> 00:26:23,930
45 Prozent halber Breite und dann Formgröße.

301
00:26:26,400 --> 00:26:32,740
Also verwende ich diese CSS-Klassen in meiner Form.

302
00:26:32,740 --> 00:26:38,230
Lassen Sie uns also die Änderungen speichern

303
00:26:38,460 --> 00:26:45,915
und werfen Sie einen kurzen Blick auf das Formular in unserer Anwendung. Wenn Sie

304
00:26:45,915 --> 00:26:48,725
in der Kontaktansicht zum Browser gehen,

305
00:26:48,725 --> 00:26:54,210
sehen Sie jetzt das Formular an Ort und Stelle in der Kontaktansicht hier.

306
00:26:54,210 --> 00:26:57,660
So sehen Sie die senden Sie uns Ihr Feedback,

307
00:26:57,660 --> 00:27:01,985
den Vornamen, den Nachnamen, die Telefonnummer, die

308
00:27:01,985 --> 00:27:06,695
E-Mail und den Schieberegler hier,

309
00:27:06,695 --> 00:27:12,395
so dass Sie den Schieberegler an Ort und Stelle sehen und dann ist dies diese Auswahl.

310
00:27:12,395 --> 00:27:15,650
Die Auswahl ermöglicht es mir, eine dieser drei auszuwählen.

311
00:27:15,650 --> 00:27:20,415
Der Standardwert ist none und dann der Textbereich hier,

312
00:27:20,415 --> 00:27:25,675
ermöglicht es mir, hier meine Feedbackkommentare einzugeben und dann den Submit-Button.

313
00:27:25,675 --> 00:27:28,940
Damit wird das reaktive Formular in

314
00:27:28,940 --> 00:27:32,690
meiner Anwendung ausgefüllt, aber wenn Sie auf die Schaltfläche Absenden klicken,

315
00:27:32,690 --> 00:27:35,000
können Sie dieses Formular nicht absenden.

316
00:27:35,000 --> 00:27:39,480
Also müssen wir das ngSubmit unserem Formular in der Vorlage

317
00:27:39,480 --> 00:27:44,485
hinzufügen und dann eine Methode in unserer Type-Skriptdatei hinzufügen. Wenn ich

318
00:27:44,485 --> 00:27:47,185
zu unserem Code gehe,

319
00:27:47,185 --> 00:27:49,315
zum Formular hier,

320
00:27:49,315 --> 00:27:53,830
zusammen mit dem Formular novalidate FormGroup,

321
00:27:53,830 --> 00:28:01,670
werde ich ein ngSubmit dem Formular hinzufügen.

322
00:28:02,730 --> 00:28:10,025
Ich rufe die Methode als onSubmit-Methode auf.

323
00:28:10,025 --> 00:28:14,155
Damit ist mein Formular nun bereit, Informationen einzureichen.

324
00:28:14,155 --> 00:28:17,195
Ich muss in die Kontaktkomponenten gehen,

325
00:28:17,195 --> 00:28:25,380
Skriptdatei eingeben und dann die onSubmit-Methode hier erstellen.

326
00:28:25,380 --> 00:28:28,420
In der onSubmit-Methode

327
00:28:31,450 --> 00:28:37,030
kommt es also vor, dass das Formularmodell genau das gleiche wie die Datenmodelle ist,

328
00:28:37,030 --> 00:28:45,790
so dass ich einfach den Wert des Formularmodells übernehmen kann.

329
00:28:45,790 --> 00:28:49,840
Wenn Sie also ein Formularmodell wie dieses Feedback-Formular haben,

330
00:28:49,840 --> 00:28:54,410
gibt das Feedback-Formular eine Eigenschaft namens value

331
00:28:54,410 --> 00:29:00,020
an, mit der ich den aktuellen Wert all dieser aus meinem Feedback-Formular abrufen kann.

332
00:29:00,020 --> 00:29:03,810
Dies wird also ein JavaScript-Objekt bilden,

333
00:29:03,810 --> 00:29:06,740
das ich dann in das Feedback-JavaScript-Objekt abbilden kann.

334
00:29:06,740 --> 00:29:10,170
Es kommt vor, dass beide genau die gleiche Struktur haben,

335
00:29:10,170 --> 00:29:11,690
das Datenmodell und das Formularmodell.

336
00:29:11,690 --> 00:29:14,140
Deshalb kann ich den Wert schnell

337
00:29:14,140 --> 00:29:18,120
direkt in das Datenmodell laden, wenn der Benutzer das Formular absendet.

338
00:29:18,120 --> 00:29:21,120
Wenn sich Ihr Datenmodell etwas vom Formularmodell unterscheidet,

339
00:29:21,120 --> 00:29:24,460
müssen Sie einzelne Eigenschaften explizit zuordnen

340
00:29:24,460 --> 00:29:28,890
, was innerhalb dieser Methode möglich ist.

341
00:29:29,610 --> 00:29:36,455
Nur um Ihnen zu zeigen, dass das Formular korrekt gesendet wurde,

342
00:29:36,455 --> 00:29:44,760
werde ich den Wert an die Konsole, die JavaScript-Konsole, protokollieren.

343
00:29:44,760 --> 00:29:50,200
Dann würde ich sagen, this.feedbackForm.Reset. Mit

344
00:29:51,320 --> 00:30:00,405
der Reset-Methode können Sie das Formular in seinen normalen Zustand zurücksetzen und

345
00:30:00,405 --> 00:30:03,000
alle Einträge entfernen, die Sie im Formular ausgeführt haben.

346
00:30:03,000 --> 00:30:05,480
Sobald der Benutzer sendet,

347
00:30:05,480 --> 00:30:09,030
würden Sie normalerweise die Werte erfassen und dann das Formular zurücksetzen

348
00:30:09,030 --> 00:30:14,365
, so dass weitere Eingaben als separates Formular erfolgen können.

349
00:30:14,365 --> 00:30:17,450
Das ist also die Reset-Methode, die wir hier verwenden werden.

350
00:30:17,450 --> 00:30:19,265
Also

351
00:30:19,265 --> 00:30:23,900
lassen Sie uns mit diesen Änderungen die Änderungen speichern und dann gehen und sehen Sie unser Formular in Aktion.

352
00:30:23,900 --> 00:30:30,080
Eine letzte kleine Sache, die ich meiner Vorlage hinzufügen möchte, besteht

353
00:30:30,080 --> 00:30:36,200
darin, Ihnen die Formularwerte in meinem Formular selbst zu zeigen,

354
00:30:36,200 --> 00:30:38,230
obwohl

355
00:30:38,230 --> 00:30:42,580
Sie dies in einer echten Anwendung nicht tun würden, aber ich wollte Ihnen nur zeigen, wie

356
00:30:42,580 --> 00:30:47,165
Sie die FeedbackForm-Werte direkt hier sehen können,

357
00:30:47,165 --> 00:30:49,095
aus dem FeedbackForm-Modell.

358
00:30:49,095 --> 00:30:52,395
Also, ich kann es hier drinnen tun.

359
00:30:52,395 --> 00:31:02,625
Ich kann FeedbackForm.Value sagen und durch json geleitet, um hier zu zeigen.

360
00:31:02,625 --> 00:31:08,435
Ebenso kann ich hier tun, FeedbackForm.

361
00:31:08,435 --> 00:31:15,840
Es gibt eine andere Eigenschaft mit diesem Formularmodell namens status,

362
00:31:15,840 --> 00:31:20,440
die mir den Status des Formulars in diesem Moment anzeigt,

363
00:31:20,440 --> 00:31:22,265
unabhängig davon, ob es gültig oder ungültig ist.

364
00:31:22,265 --> 00:31:26,900
Also, ich werde diese beiden in mein Formular hier hinzufügen,

365
00:31:26,900 --> 00:31:30,285
so dass dies in meiner Vorlage angezeigt wird.

366
00:31:30,285 --> 00:31:34,670
Dies ist nur, um Ihnen einen sofortigen Überblick darüber zu geben, was

367
00:31:34,670 --> 00:31:41,620
das Formularmodell in meiner Type-Skriptdatei enthält.

368
00:31:42,460 --> 00:31:47,590
Lassen Sie uns die Änderungen speichern und gehen und werfen Sie einen kurzen Blick auf unser Formular.

369
00:31:47,590 --> 00:31:50,325
Wenn Sie zu unserem Browser zurückkehren,

370
00:31:50,325 --> 00:31:55,630
können Sie jetzt sehen, dass die Formularwerte

371
00:31:55,630 --> 00:32:04,460
hier angezeigt werden und das Formular in guter Form ist, damit wir die Werte eingeben können.

372
00:32:04,460 --> 00:32:08,660
Also lassen Sie uns hier einige Zufallswerte eingeben und Sie können

373
00:32:08,660 --> 00:32:14,090
sofort sehen, dass der Wert im FeedbackForm-Modell dort reflektiert wird,

374
00:32:14,090 --> 00:32:24,020
direkt an der Spitze und E-Mail.

375
00:32:26,050 --> 00:32:29,295
Es spielt keine Rolle, tippen Sie einfach etwas ein.

376
00:32:29,295 --> 00:32:31,680
Dann, dieser Schalter,

377
00:32:31,680 --> 00:32:34,575
können Sie sehen, dass, wenn Sie es ein- und ausschalten,

378
00:32:34,575 --> 00:32:39,385
die zustimmen wiederum ändert sich von false zu true.

379
00:32:39,385 --> 00:32:43,030
Also lassen Sie mich es wahr lassen und dann die Auswahl.

380
00:32:43,030 --> 00:32:50,640
Lassen Sie mich E-Mail auswählen und dann sehen Sie, dass der Kontakttyp hier in E-Mail geändert hat.

381
00:32:50,640 --> 00:32:56,060
So würden Sie wählen, um den Wert zu ändern.

382
00:32:56,060 --> 00:33:00,575
Also, sagen wir E-Mail und dann hier

383
00:33:00,575 --> 00:33:01,940
können wir die Nachricht eingeben.

384
00:33:01,940 --> 00:33:05,960
Einige zufällige Text hier und Sie würden

385
00:33:05,960 --> 00:33:10,675
in der Lage zu sehen, dass der zufällige Text in der Nachricht dort reflektiert wird.

386
00:33:10,675 --> 00:33:12,690
Lassen Sie uns das Formular absenden.

387
00:33:12,690 --> 00:33:16,680
Wenn Sie also auf das Senden klicken, sehen Sie sofort in der Konsole,

388
00:33:16,680 --> 00:33:20,605
der Wert hier ausgedruckt wird,

389
00:33:20,605 --> 00:33:21,870
in diesem Objekt hier.

390
00:33:21,870 --> 00:33:27,155
So können Sie durchsuchen, um alle Eigenschaften für dieses Objekt,

391
00:33:27,155 --> 00:33:31,050
das Feedback-Formularmodell, anzuzeigen.

392
00:33:31,050 --> 00:33:38,210
Dies ist also eine Illustration einer reaktiven Form innerhalb unserer Anwendung.

393
00:33:38,210 --> 00:33:41,850
Damit ist diese Übung abgeschlossen.

394
00:33:41,850 --> 00:33:44,800
In dieser Übung haben wir gesehen, wie wir

395
00:33:44,800 --> 00:33:47,910
innerhalb unserer Angular-Anwendung eine reaktive Form erstellen können.

396
00:33:47,910 --> 00:33:52,910
Dies ist auch ein guter Punkt, an dem Sie ein Git-Commit mit der Nachricht durchführen können,

397
00:33:52,910 --> 00:33:55,670
reaktive bildet Teil eins.