1
00:00:03,650 --> 00:00:09,630
Wir hatten uns in einer der vorangegangenen Lektionen mit reaktiven Formularen befasst,

2
00:00:09,630 --> 00:00:14,420
wo wir zwei Übungen gemacht haben, die sich mit reaktiven Formularen befassen,

3
00:00:14,420 --> 00:00:15,695
wie wir sie erstellen,

4
00:00:15,695 --> 00:00:20,530
und dann auch einige grundlegende Formularvalidierung auf reaktiven Formularen.

5
00:00:20,530 --> 00:00:24,525
Wir werden mit dem Thema in dieser Lektion fortfahren,

6
00:00:24,525 --> 00:00:28,790
da reaktive Formulare, wie der Name schon sagt,

7
00:00:28,790 --> 00:00:33,019
etwas mit reaktiver Programmierung zu tun haben, wie Sie es vielleicht erwartet haben. Mit

8
00:00:33,019 --> 00:00:42,429
reaktiven Formularen können Sie nun auch Änderungen in den Werten der Formularelemente beobachten, indem Sie

9
00:00:42,429 --> 00:00:48,320
eine beobachtbare verwenden, die Angular als valueChanges zur Verfügung stellt.

10
00:00:48,320 --> 00:00:53,450
Wir verwenden die in dieser Übung beobachtbaren ValueChanges,

11
00:00:53,450 --> 00:00:57,080
um Änderungen an den Werten

12
00:00:57,080 --> 00:01:01,650
ihrer verschiedenen Formularelemente zu verfolgen und dann sofort die Formularüberprüfung auszulösen.

13
00:01:01,650 --> 00:01:06,350
In dieser Übung werden wir den Großteil der Formularvalidierung im

14
00:01:06,350 --> 00:01:11,120
Code und nicht in der Vorlage selbst durchführen,

15
00:01:11,120 --> 00:01:19,189
wie wir es bei der Reaktorformvalidierung in der zweiten Übung reaktiver Formulare getan haben.

16
00:01:19,189 --> 00:01:24,115
Gehen Sie zu contact.component.tsfile,

17
00:01:24,115 --> 00:01:29,720
wir werden das reaktive Formular, das wir hier erstellt haben, aktualisieren,

18
00:01:29,720 --> 00:01:34,445
indem wir ein paar weitere Validatoren für einige dieser Felder hinzufügen.

19
00:01:34,445 --> 00:01:38,915
Also, hier sehen Sie, dass

20
00:01:38,915 --> 00:01:43,465
wir für den Vornamen und die Telefonnummer und E-Mail die erforderlichen Validatoren hinzugefügt haben.

21
00:01:43,465 --> 00:01:45,290
Für den Vor- und Nachnamen

22
00:01:45,290 --> 00:01:48,500
werde ich ein paar weitere Validatoren für

23
00:01:48,500 --> 00:01:52,315
die minimale Länge und die maximale Länge hinzufügen.

24
00:01:52,315 --> 00:01:57,185
Wenn Sie nun mehr als einen Validator in Ihrem reaktiven Formular

25
00:01:57,185 --> 00:02:04,470
haben, müssen Sie sie mit einem Array deklarieren.

26
00:02:04,470 --> 00:02:08,385
Also, dies muss in einem Array hier eingeschlossen werden.

27
00:02:08,385 --> 00:02:12,790
Sie sehen also, dass ich den erforderlichen Validator in ein Array eingeschlossen habe.

28
00:02:12,790 --> 00:02:21,300
Ich werde in einem Validators, MinLength Validator hinzufügen.

29
00:02:21,300 --> 00:02:25,250
Also, für die minimale Länge werde ich zwei als minimale Länge angeben,

30
00:02:25,250 --> 00:02:28,925
so dass der Vorname mindestens zwei Zeichen enthalten sollte.

31
00:02:28,925 --> 00:02:36,645
Auch die maximale Länge, die ich

32
00:02:36,645 --> 00:02:48,035
als 25 Zeichen hinzufügen werde.

33
00:02:48,035 --> 00:02:52,740
Also, hier sehen Sie, dass wir jetzt für den Vornamen drei verschiedene Validierungen haben,

34
00:02:52,740 --> 00:02:55,455
alle in einem Array hier eingeschlossen.

35
00:02:55,455 --> 00:02:58,620
Validatoren erforderlich, Validators minLength

36
00:02:58,620 --> 00:03:02,135
und Validators maxLength hier, 25.

37
00:03:02,135 --> 00:03:05,900
Also werde ich dasselbe auch für meinen Nachnamen tun.

38
00:03:05,900 --> 00:03:11,115
Also, lassen Sie mich diesen ganzen Validators-Strahl hier kopieren

39
00:03:11,115 --> 00:03:21,420
und dann diesen durch diesen Satz von Validatoren ersetzen.

40
00:03:21,420 --> 00:03:25,330
Nun, für die Telefonnummer,

41
00:03:25,330 --> 00:03:29,060
wie Sie sich in der früheren Version des Formulars erinnern würden,

42
00:03:29,060 --> 00:03:35,395
war die Telefonnummer bereit, sogar Alphabete zu akzeptieren,

43
00:03:35,395 --> 00:03:37,015
aber das ist nicht korrekt.

44
00:03:37,015 --> 00:03:40,070
Telefonnummern sind in der Regel Nummern.

45
00:03:40,070 --> 00:03:43,955
Also, hier werden wir einen anderen Validator

46
00:03:43,955 --> 00:03:53,005
namens Pattern Validators verwenden.

47
00:03:53,005 --> 00:03:57,890
Also, das Muster Validator ermöglicht es uns, ein Muster für

48
00:03:57,890 --> 00:04:02,719
die Werte in diesem bestimmten Formularelement eingegeben angeben,

49
00:04:02,719 --> 00:04:09,465
und überprüfen Sie dann, um sicherzustellen, dass der Wert dem angegebenen Muster folgt.

50
00:04:09,465 --> 00:04:12,470
Also, hier ist das Muster, das wir verwenden werden, dass der Wert

51
00:04:12,470 --> 00:04:17,180
nur Zahlen zwischen Null und neun enthalten sollte. Um

52
00:04:17,180 --> 00:04:19,015
das Muster hinzuzufügen,

53
00:04:19,015 --> 00:04:23,860
müssen wir das in der Vorlagendatei tun, wie wir in kurzer Zeit sehen werden.

54
00:04:23,860 --> 00:04:26,415
In ähnlicher Weise

55
00:04:26,415 --> 00:04:31,635
werde ich für die E-Mail auch einen anderen Validator haben, der als E-Mail Validator aufgerufen wird.

56
00:04:31,635 --> 00:04:35,035
Also, wir werden in der Validator-E-Mail hinzufügen.

57
00:04:35,035 --> 00:04:40,010
Dies bedeutet auch, dass wir ein Attribut

58
00:04:40,010 --> 00:04:44,990
namens E-Mail zu der Eingabe in unserer Vorlagendatei hinzufügen müssen.

59
00:04:44,990 --> 00:04:53,145
Mit diesen Änderungen ist meine Formularvalidierung jetzt in dieser Übung robuster geworden.

60
00:04:53,145 --> 00:04:59,534
Nun, wenn das Formular Änderungen in einem seiner Formularelemente erfährt,

61
00:04:59,534 --> 00:05:09,530
dann bietet das Angular Framework eine beobachtbare namens valueChanges beobachtbar.

62
00:05:09,530 --> 00:05:16,150
Also werde ich die ValueChanges verwenden, die auf meinem Feedback-Formular beobachtet werden können.

63
00:05:16,550 --> 00:05:19,770
Also, die valueChanges beobachtbar.

64
00:05:19,770 --> 00:05:26,640
Daher kann die beobachtbare ValueChanges jetzt innerhalb dieser bestimmten Methode abonniert werden.

65
00:05:26,640 --> 00:05:28,415
Wenn wir also das Formular selbst erstellen,

66
00:05:28,415 --> 00:05:31,520
werden wir die hier beobachtbaren ValueChanges abonnieren.

67
00:05:31,520 --> 00:05:33,470
Jetzt, wenn der

68
00:05:33,470 --> 00:05:38,274
ValueChanges, also indem ich dieses beobachtbare abonniere,

69
00:05:38,274 --> 00:05:44,630
werde ich innerhalb des Abonnements angeben, was getan werden soll, wenn der ValueChanges.

70
00:05:44,630 --> 00:05:49,160
Also, wenn die valueChanges Ich würde hier einige Daten

71
00:05:49,160 --> 00:05:52,055
von der Farm erhalten, um anzuzeigen

72
00:05:52,055 --> 00:05:59,050
, welches bestimmte Formularelement die Änderung des Wertes erlebt hat.

73
00:05:59,050 --> 00:06:00,665
Dann, wenn das passiert,

74
00:06:00,665 --> 00:06:07,865
werde ich eine lokale Methode auslösen, die ich mit dem Namen OnValueChanged implementieren werde,

75
00:06:07,865 --> 00:06:13,165
und dann diese Daten als Parameter für diese Methode bereitstellen.

76
00:06:13,165 --> 00:06:16,455
Jetzt, innerhalb dieser onValueChanged-Methode,

77
00:06:16,455 --> 00:06:20,445
werde ich die Formularüberprüfung initiieren

78
00:06:20,445 --> 00:06:27,155
und dann die Formularfehlermeldungen entsprechend definieren, basierend darauf, was

79
00:06:27,155 --> 00:06:35,380
dieses Datenobjekt, das ich hier erhalte, für mich angeben wird.

80
00:06:35,380 --> 00:06:39,125
Außerdem

81
00:06:39,125 --> 00:06:47,114
rufe ich beim ersten Erstellen des Formulars die onValueChanged-Methode ohne Parameter auf,

82
00:06:47,114 --> 00:06:50,250
und dies würde verwendet werden, um

83
00:06:50,250 --> 00:06:58,615
Formularüberprüfungsmeldungen zurückzusetzen.

84
00:06:58,615 --> 00:07:02,195
Wie erstelle ich nun die Formular-Validierungsnachrichten?

85
00:07:02,195 --> 00:07:09,230
Um dies zu tun, werde ich hier meine Formular-Validierungsnachrichten vollständig im Code definieren.

86
00:07:09,230 --> 00:07:12,620
Dann

87
00:07:12,620 --> 00:07:15,920
werde ich durch den Code die Formularüberprüfungsmeldungen anpassen,

88
00:07:15,920 --> 00:07:23,785
und das würde dann verwendet werden, um die Fehlermeldungen in meiner Formularvorlage selbst anzuzeigen.

89
00:07:23,785 --> 00:07:33,830
Also, um das zu tun, was ich tun werde, ist, ein paar JavaScript-Objekte hier hinzuzufügen.

90
00:07:33,830 --> 00:07:42,485
Eines der JavaScript-Objekte, die ich hinzufügen werde, ist als Formularfehler benannt.

91
00:07:42,485 --> 00:07:46,790
Dies ist also ein einfaches JavaScript-Objekt,

92
00:07:46,790 --> 00:07:52,315
das hier alle Fehler für das jeweilige Formular enthält.

93
00:07:52,315 --> 00:07:54,799
Also innerhalb der Formularfehler,

94
00:07:54,799 --> 00:08:02,609
werde ich vier verschiedene Felder verwenden,

95
00:08:02,609 --> 00:08:11,275
Vorname, Nachname.

96
00:08:11,275 --> 00:08:13,305
Wie Sie sich erinnern,

97
00:08:13,305 --> 00:08:21,889
entsprechen diese den vier Formularelementen, auf denen ich die Formularvalidierung,

98
00:08:21,889 --> 00:08:30,470
Telefonnummer und E-Mail durchführe.

99
00:08:30,470 --> 00:08:35,020
Warum definiere ich dieses JavaScript-Objekt hier?

100
00:08:35,020 --> 00:08:41,075
Nun enthält dieses JavaScript-Objekt, wie Sie sehen, vier Elemente hier.

101
00:08:41,075 --> 00:08:44,270
Wenn ich nun die Formularüberprüfung durchführe,

102
00:08:44,270 --> 00:08:47,090
erinnere dich daran, dass

103
00:08:47,090 --> 00:08:50,915
ich bereits angegeben habe, dass ich eine neue Methode namens OnValueChange erstellen werde.

104
00:08:50,915 --> 00:08:55,145
Innerhalb von OnValueChange, wie der Code geschrieben wird, ist, dass,

105
00:08:55,145 --> 00:08:58,300
wenn ein Fehler erkannt wird,

106
00:08:58,300 --> 00:09:02,315
eine Zeichenfolge, die die Nachricht enthält, die diesem

107
00:09:02,315 --> 00:09:08,135
Fehler entspricht, in diesem JavaScript-Objekt hinzugefügt wird.

108
00:09:08,135 --> 00:09:10,535
Auf diese Weise in meinem Code

109
00:09:10,535 --> 00:09:13,204
kann ich die Formularvalidierung durchführen.

110
00:09:13,204 --> 00:09:15,315
Zusätzlich dazu

111
00:09:15,315 --> 00:09:21,150
werde ich nun ein paar Validierungsnachrichten definieren.

112
00:09:21,840 --> 00:09:27,100
Nun, dieses besondere Muster, Dinge zu tun,

113
00:09:27,100 --> 00:09:36,345
lernte ich, indem ich die Dokumentation zur Formularvalidierung auf der angular.io-Website las.

114
00:09:36,345 --> 00:09:43,020
Sie haben also eine ganze Dokumentation zur Formularvalidierung und einen Link zu dem

115
00:09:43,020 --> 00:09:45,315
in den zusätzlichen Ressourcen

116
00:09:45,315 --> 00:09:50,510
dieses Kapitels und auch in den vorherigen Kapiteln über eckige Formen zur Verfügung steht.

117
00:09:50,510 --> 00:09:55,950
Also, dort in diesem speziellen Dokument

118
00:09:55,950 --> 00:10:02,655
verschreiben sie dies als eine Möglichkeit, Formularvalidierung durchzuführen, und ich fand das sehr intuitiv.

119
00:10:02,655 --> 00:10:08,640
Also habe ich auch das gleiche Muster für die Formularvalidierung im Code übernommen.

120
00:10:08,640 --> 00:10:10,500
Also, zusammen mit hier,

121
00:10:10,500 --> 00:10:20,515
werde ich die Validierungsnachrichten für alle möglichen Felder hier definieren.

122
00:10:20,515 --> 00:10:22,475
Also, für das Feld Vorname,

123
00:10:22,475 --> 00:10:30,050
werde ich hier ein paar Validierungsnachrichten definieren, also würde ich sagen,

124
00:10:30,050 --> 00:10:32,965
„erforderlich“ und dann sagen,

125
00:10:32,965 --> 00:10:39,940
„Vorname ist erforderlich“ wie folgt,

126
00:10:39,940 --> 00:10:48,790
ich werde

127
00:10:48,790 --> 00:10:52,030
hier ein paar Validierungsnachrichten hinzufügen und sagen:

128
00:10:52,030 --> 00:10:57,070
„Der Vorname muss

129
00:10:57,070 --> 00:11:05,770
mindestens 2 Zeichen lang sein“ und dann werde ich auch hinzufügen,

130
00:11:05,770 --> 00:11:15,700
„max length“ und die entsprechende Meldung lautet

131
00:11:15,700 --> 00:11:23,630
: „Vorname darf nicht mehr als 25 sein“.

132
00:11:24,780 --> 00:11:29,685
Wenn Sie einen Namen haben, der in 25 Zeichen läuft,

133
00:11:29,685 --> 00:11:35,115
müssen Sie wirklich Ihre Eltern dafür verfluchen, glauben Sie mir,

134
00:11:35,115 --> 00:11:39,670
einer meiner zweiten Vornamen ist ein langer zweiter Vorname

135
00:11:39,670 --> 00:11:46,035
, und den ich nicht explizit in meinen Dokumenten verwende.

136
00:11:46,035 --> 00:11:48,870
Aber, Ich kann den Schmerz verstehen,

137
00:11:48,870 --> 00:11:55,450
wenn Sie einen langen Namen mehr als 25 Zeichen haben.

138
00:11:56,700 --> 00:12:02,900
Leute aus einigen Staaten im südlichen Teil Indiens haben lange Namen,

139
00:12:03,690 --> 00:12:06,870
mein Staat eingeschlossen, hey,

140
00:12:06,870 --> 00:12:09,270
lasst uns etwas Spaß haben, während wir dabei sind.

141
00:12:09,270 --> 00:12:17,180
Okay, ich werde auch das Gleiche für den Nachnamen einschließen.

142
00:12:17,180 --> 00:12:23,380
Also, ich werde dies bearbeiten

143
00:12:23,380 --> 00:12:33,430
und das gleiche wie Nachname angeben.

144
00:12:33,430 --> 00:12:39,020
So, wie Sie innerhalb des Codes sehen, können Sie eine Reihe von Fehlermeldungen angeben.

145
00:12:39,020 --> 00:12:42,855
Wenn Sie Ihren Formularen eine neue Validierung hinzufügen,

146
00:12:42,855 --> 00:12:47,230
müssen Sie

147
00:12:47,230 --> 00:12:54,635
nur hierher kommen und die neue Fehlermeldung in dieses JavaScript-Objekt hinzufügen und Ihr Code wird als solcher gut funktionieren.

148
00:12:54,635 --> 00:13:03,015
Das ist also der Vorteil, dieses Muster zum Entwerfen Ihrer Validierung in Code zu verwenden.

149
00:13:03,015 --> 00:13:09,835
Fortsetzung, lassen Sie mich definieren, die Validierung für Telefonnummer und

150
00:13:09,835 --> 00:13:17,700
die beiden Validierung für Telefonnummern, die passieren würde, ist die „erforderliche“.

151
00:13:17,700 --> 00:13:22,390
Also, ich werde nur das „Erforderliche“ von dort kopieren

152
00:13:22,390 --> 00:13:24,170
und es hier einfügen,

153
00:13:24,170 --> 00:13:27,215
und ich würde sagen,

154
00:13:27,215 --> 00:13:36,910
„Telefonnummer ist erforderlich“, und die nächste Fehlermeldung wäre für „Muster“.

155
00:13:36,910 --> 00:13:42,585
Die Fehlermeldung besagt also:

156
00:13:42,585 --> 00:13:50,770
„Telefonnummer darf nur Zahlen enthalten.“

157
00:13:50,910 --> 00:13:58,070
Also, das ist die andere Nachricht, ähnlich für E-Mail.

158
00:13:58,070 --> 00:14:03,109
Wie Sie sehen können,

159
00:14:03,109 --> 00:14:08,430
entsprechen die Werte, die ich hier verwende, den Validator-Namen, die ich verwendet habe,

160
00:14:08,430 --> 00:14:12,305
„mittlere Länge“, „maximale Länge erforderlich“, „Muster“.

161
00:14:12,305 --> 00:14:14,280
So

162
00:14:14,280 --> 00:14:18,720
würden Sie ähnlich für E-Mail „erforderlich“ und „E-Mail“ sehen.

163
00:14:18,720 --> 00:14:28,615
Also, ich werde nur die „erforderlichen“ hier drüben kopieren und sagen: „E-Mail ist erforderlich“.

164
00:14:28,615 --> 00:14:36,020
Das andere Muster, wie Sie sich erinnern, ist für E-Mail und ich würde sagen,

165
00:14:36,020 --> 00:14:40,865
„E-Mail nicht in gültigem Format“.

166
00:14:40,865 --> 00:14:43,200
Wenn Ihre E-Mail also kein

167
00:14:43,200 --> 00:14:48,190
@-Zeichen und Zeichen auf beiden Seiten des @-Zeichens enthält,

168
00:14:48,190 --> 00:14:50,230
dann ist dies keine gültige E-Mail.

169
00:14:50,230 --> 00:14:58,265
Diese E-Mail Validator ist bereits in das eckige reaktive Forms-Modul integriert.

170
00:14:58,265 --> 00:15:02,240
Also, wir nutzen die E-Mail Validator hier.

171
00:15:02,240 --> 00:15:07,450
Also, hier haben wir alle Validierungsnachrichten, die im Code definiert sind.

172
00:15:07,450 --> 00:15:14,340
Das macht es daher sehr einfach, sie bei Bedarf um zusätzliche Felder zu erweitern und auch

173
00:15:14,340 --> 00:15:17,770
weitere Validierungsnachrichten für zusätzliche Validierungen hinzuzufügen

174
00:15:17,770 --> 00:15:21,865
, die Sie für jedes dieser Formularfelder einführen könnten.

175
00:15:21,865 --> 00:15:25,785
Außerdem hilft mir diese Objektformularfehler,

176
00:15:25,785 --> 00:15:31,415
alle Fehler zu verfolgen, die mit jedem der Elemente in meinem Telefon verbunden sind.

177
00:15:31,415 --> 00:15:34,390
Also, momentan überprüfe ich nur diese vier Elemente,

178
00:15:34,390 --> 00:15:37,165
deshalb habe ich nur dafür.

179
00:15:37,165 --> 00:15:42,365
Geringfügige Korrektur, die „mittlere Länge“ sollte min,

180
00:15:42,365 --> 00:15:45,910
klein 'l' und max Länge auch mit einem kleinen 'l' sein,

181
00:15:45,910 --> 00:15:48,140
ähnlich für den Nachnamen auch.

182
00:15:48,140 --> 00:15:53,750
Nun, lassen Sie uns den Code für die auf Werte geänderte Methode schreiben.

183
00:15:53,750 --> 00:15:55,765
Also, ich werde die Methode

184
00:15:55,765 --> 00:16:02,860
hier schreiben, "valueChanged“ und dann

185
00:16:02,860 --> 00:16:08,275
wird dies möglicherweise einen Parameter aufnehmen.

186
00:16:08,275 --> 00:16:10,900
Deshalb habe ich ein Datenfragezeichen gesetzt,

187
00:16:10,900 --> 00:16:16,760
was bedeutet, dass der Parameter optional ist.

188
00:16:17,760 --> 00:16:27,610
Also, das erste, was ich überprüfen werde, ist „dieses Feedback-Formular“,

189
00:16:27,610 --> 00:16:32,290
was bedeutet, dass, wenn das Feedback-Formular dann nicht erstellt wurde,

190
00:16:32,290 --> 00:16:34,960
und wenn diese Methode aufgerufen wird,

191
00:16:34,960 --> 00:16:42,130
Sie einfach ohne irgendetwas „zurückkehren“ sollten.

192
00:16:42,130 --> 00:16:50,680
Dann werde ich eine

193
00:16:50,680 --> 00:16:56,780
Konstante namens „dieses

194
00:16:56,780 --> 00:17:03,025
Feedback-Formular“ definieren, um es einfach zu machen, den Rest des Codes zu definieren,

195
00:17:03,025 --> 00:17:05,380
dann würde ich sagen, „für

196
00:17:06,240 --> 00:17:16,330
const-Feld in diese.form-Fehler“.

197
00:17:16,330 --> 00:17:21,510
Beachten Sie also, dass dieses Feld this.form Fehler nehmen wird,

198
00:17:21,510 --> 00:17:24,710
das Formular Fehler Objekt, das wir zuvor definiert haben.

199
00:17:24,710 --> 00:17:28,150
Also, fühlen bedeutet, dass ich alle vier überprüfen werde.

200
00:17:28,150 --> 00:17:29,890
Also, wenn ich irgendwelche Änderungen erkenne,

201
00:17:29,890 --> 00:17:31,260
den Vornamen, den Nachnamen, die

202
00:17:31,260 --> 00:17:32,820
Tel Nummer und eine E-Mail.

203
00:17:32,820 --> 00:17:41,080
Deshalb werden diese vier genau die gleichen Namen tragen, wie wir in der Form hier verwendet haben,

204
00:17:41,080 --> 00:17:50,330
und so dass der hier geschriebene Code einfach zu arbeiten ist.

205
00:17:52,770 --> 00:17:56,650
Also, ich werde jetzt die Formularfelder überprüfen.

206
00:17:56,650 --> 00:18:07,090
Dann würde ich zuerst

207
00:18:07,090 --> 00:18:16,000
sicherstellen, dass, falls ich früher Nachrichten an diese Formularfelder angehängt habe,

208
00:18:16,000 --> 00:18:17,810
Formularfehler Objekt dort,

209
00:18:17,810 --> 00:18:19,665
dann werde ich alle löschen.

210
00:18:19,665 --> 00:18:23,830
Deshalb werden, wenn Sie dies ohne Parameter aufrufen,

211
00:18:23,830 --> 00:18:26,600
alle Formularfehlerfelder gelöscht,

212
00:18:26,600 --> 00:18:36,335
und dann würde ich tun, „Steuerelement FormGet“.

213
00:18:36,335 --> 00:18:44,330
Beachten Sie also, dass ich dieses Feld selbst verwende, um ein FormGet zu tun, also

214
00:18:44,330 --> 00:18:48,530
bekomme ich Zugriff auf dieses bestimmte Formularfeld.

215
00:18:48,530 --> 00:18:52,090
Beachten Sie also, dass wir früher „feedbackform.this.feedbackform.get"firstname“ gemacht haben.

216
00:18:58,930 --> 00:19:04,870
und so weiter. Also, ich habe vereinfacht, was in diese bestimmte Konstante, die wir

217
00:19:04,870 --> 00:19:13,000
hier definiert haben, und dann werde ich sagen: „Wenn Kontrolle“.

218
00:19:13,000 --> 00:19:22,645
Also, was bedeutet, dass, wenn die Kontrolle nicht null und „control.dirty“ ist.

219
00:19:22,645 --> 00:19:28,150
Also, wenn dieses bestimmte Feld bereits schmutzig ist

220
00:19:28,150 --> 00:19:33,635
und nicht „control valid“.

221
00:19:33,635 --> 00:19:36,280
Also, bedeutet, dass

222
00:19:36,280 --> 00:19:39,780
ich für jedes der Felder buchstäblich überprüfe, ob es gültig ist,

223
00:19:39,780 --> 00:19:40,840
ob es schmutzig ist,

224
00:19:40,840 --> 00:19:44,260
und dann, ob das Steuerelement bereits vorhanden ist.

225
00:19:44,260 --> 00:19:48,430
Dann werde ich überprüfen, um zu sehen, welche Art von Fehlern zu

226
00:19:48,430 --> 00:19:53,185
diesem speziellen Steuerelement durch das Formular dort hinzugefügt wurden.

227
00:19:53,185 --> 00:19:55,045
Also, hier werde ich sagen,

228
00:19:55,045 --> 00:19:59,500
„const Nachrichten

229
00:19:59,500 --> 00:20:06,560
gleich this.validation messages field“.

230
00:20:07,260 --> 00:20:10,635
Beachten Sie, wie ich

231
00:20:10,635 --> 00:20:15,785
alle Validierungsnachrichten aufnehme, die diesem bestimmten Feld

232
00:20:15,785 --> 00:20:19,370
Vorname, Nachname oder Telnum oder E-Mail entsprechen,

233
00:20:19,370 --> 00:20:23,585
und dann werde ich überprüfen und sehen, ob ich dies in das Feld hinzufügen muss.

234
00:20:23,585 --> 00:20:25,050
Also, wie mache ich das?

235
00:20:25,050 --> 00:20:35,360
Also, wir tun für const Schlüssel in control.errors.

236
00:20:35,360 --> 00:20:45,510
Beachten Sie also, dass dieses Steuerelement Feedback-Form.get-Feld und.error ist,

237
00:20:45,510 --> 00:20:48,980
also überprüfe ich, ob es irgendwelche Fehler gibt.

238
00:20:48,980 --> 00:20:51,370
Dann, in diesem Fall,

239
00:20:51,370 --> 00:20:58,485
werde ich dieses Formularfehlerfeld hinzufügen.

240
00:20:58,485 --> 00:21:06,285
Also, für dieses bestimmte Element im JavaScript-Objekt, das ich hier definiert habe,

241
00:21:06,285 --> 00:21:13,180
würde ich

242
00:21:13,180 --> 00:21:21,135
hier Nachrichtenschlüssel und Leerzeichen hinzufügen.

243
00:21:21,135 --> 00:21:24,590
Also, jetzt, was auch immer Form Fehler Umfrage

244
00:21:24,590 --> 00:21:27,555
oder die entsprechende Nachricht wird genommen und angehängt werden,

245
00:21:27,555 --> 00:21:32,350
und dann, so meine Formularfehler JavaScript-Objekt wird jetzt

246
00:21:32,350 --> 00:21:34,970
alle Fehlermeldungen zusammen enthalten, wenn

247
00:21:34,970 --> 00:21:39,780
diese spezielle auf Werte Methode Ratten geändert.

248
00:21:39,780 --> 00:21:44,430
Nun, dieses spezielle Stück Code, den ich aus

249
00:21:44,430 --> 00:21:50,560
der Formularvalidierungsdokumentation auf angular.iu ausgeliehen habe.

250
00:21:50,560 --> 00:21:55,240
Ich habe festgestellt, dass dies eine sehr intuitive Möglichkeit ist, Formularfehlerüberprüfung durchzuführen.

251
00:21:55,240 --> 00:22:02,195
Also, ich dachte, warum nicht nutzen, dass innerhalb unserer eckigen reaktiven Formen Übung.

252
00:22:02,195 --> 00:22:05,515
Also, fügen Sie diesen Code dort hinzu.

253
00:22:05,515 --> 00:22:15,180
Jetzt ist meine Anwendung bereit, die Formularvalidierung für mein reaktives Formular durchzuführen.

254
00:22:15,180 --> 00:22:22,500
Nun besteht der nächste Schritt darin, zum Kontakt component.html,

255
00:22:22,500 --> 00:22:25,805
der Vorlagendatei, zu gehen und dann die Vorlagendatei zu aktualisieren.

256
00:22:25,805 --> 00:22:28,505
Also, wenn wir zu dieser Vorlagendatei

257
00:22:28,505 --> 00:22:31,275
gehen, werden wir jetzt auf das Formular gehen,

258
00:22:31,275 --> 00:22:39,100
und das in diesem Formular jetzt, anstatt all dies im Code zu tun,

259
00:22:39,920 --> 00:22:48,165
können wir jetzt einen Großteil des Codes hier in der Vorlagendatei hier vereinfachen.

260
00:22:48,165 --> 00:22:50,550
Nun, anstatt all diese Prüfungen zu tun,

261
00:22:50,550 --> 00:22:56,065
was wir erkennen, ist, dass die Formularfehler JavaScript-Objekt in

262
00:22:56,065 --> 00:23:00,270
meiner Typoskriptdatei, wenn es Fehler gibt, dann

263
00:23:00,270 --> 00:23:05,610
die Formularfehler JavaScript-Objekt für dieses bestimmte Feld,

264
00:23:05,610 --> 00:23:10,125
werden alle Fehlermeldungen daran angehängt haben.

265
00:23:10,125 --> 00:23:11,460
Wenn keine Fehler vorliegen

266
00:23:11,460 --> 00:23:14,505
, sind diese Fehlermeldungen nicht vorhanden.

267
00:23:14,505 --> 00:23:17,860
Also, das werde ich verwenden, um zu überprüfen und zu

268
00:23:17,860 --> 00:23:21,245
sehen, ob ich den Formularfehler anzeigen soll oder nicht.

269
00:23:21,245 --> 00:23:24,685
Also, für diese Angelegenheit, anstatt all dies zu überprüfen,

270
00:23:24,685 --> 00:23:34,740
das einzige, was ich hier überprüfen muss, ist FormErrors Vorname, das ist es.

271
00:23:34,740 --> 00:23:40,450
Also, sehr einfach, hier auf Fehler zu überprüfen.

272
00:23:41,110 --> 00:23:47,095
Ähnlich, so dass dieser ganze Code jetzt hier vereinfacht wird,

273
00:23:47,095 --> 00:23:52,100
und ähnlich, wenn Sie

274
00:23:52,100 --> 00:23:56,615
nach der Nachricht hier suchen, was wir tun werden, werde ich diese ganze Sache von

275
00:23:56,615 --> 00:24:05,165
erforderlich berührt zu formerrors.firstName ändern.

276
00:24:05,165 --> 00:24:08,955
Das war's. Wenn das existiert,

277
00:24:08,955 --> 00:24:14,760
dann werden alle Fehlermeldungen, die diesem entsprechen, bereits da sein,

278
00:24:14,760 --> 00:24:19,620
also muss ich nur Interpolation durchführen und

279
00:24:19,620 --> 00:24:26,555
dann formerrors.firstName hier anzeigen,

280
00:24:26,555 --> 00:24:28,385
so einfach wie das.

281
00:24:28,385 --> 00:24:30,240
Jetzt sehen Sie, indem Sie

282
00:24:30,240 --> 00:24:36,355
alle Formularfehlervalidierung und -code durchführen und alle Prüfungen und so weiter im Code durchführen,

283
00:24:36,355 --> 00:24:40,200
haben Sie bereits die Fehlermeldungen erstellt, die wir anzeigen müssen.

284
00:24:40,200 --> 00:24:42,740
Alles, was wir tun, ist, dass wir diese Fehlermeldung nehmen und

285
00:24:42,740 --> 00:24:45,745
diese dann in die Vorlage hier einfügen, das war's.

286
00:24:45,745 --> 00:24:50,105
Der Template-Code wird in diesem speziellen Fall vereinfacht,

287
00:24:50,105 --> 00:24:57,225
und auch durch die Formularvalidierung mit dem Typoskriptcode

288
00:24:57,225 --> 00:25:02,045
haben wir die Vorlage hier vereinfacht, gleichzeitig können wir

289
00:25:02,045 --> 00:25:09,165
kompliziertere Formularvalidierung in unserem Typoskriptcode durchführen.

290
00:25:09,165 --> 00:25:16,500
Ich werde voran gehen und die gleichen Art von Änderungen an den verbleibenden Feldern hier vornehmen,

291
00:25:16,500 --> 00:25:20,460
also

292
00:25:20,460 --> 00:25:30,850
werde ich für das Feld Nachname diese ganze Sache erneut durch formerrors.lastName ersetzen.

293
00:25:34,100 --> 00:25:41,050
Tun Sie das Gleiche für die Telefonnummer.

294
00:25:41,330 --> 00:25:46,910
Nun, wieder, wie Sie sehen, wird die Struktur der Vorlage

295
00:25:46,910 --> 00:25:50,230
in diesem Fall sehr, sehr einheitlich.

296
00:25:50,230 --> 00:25:55,020
Das ist also auch eine weitere Möglichkeit,

297
00:25:55,020 --> 00:26:01,660
die Struktur Ihrer Vorlage zu vereinfachen, weiter zum E-Mail-Feld hier.

298
00:26:01,660 --> 00:26:06,640
Ich werde die gleiche Änderung auch im E-Mail-Feld vornehmen.

299
00:26:06,640 --> 00:26:10,430
Also, ich würde sagen formerrors.email

300
00:26:12,470 --> 00:26:19,140
und ersetzen Sie dies durch formatters.email.

301
00:26:19,140 --> 00:26:20,995
Wie Sie sehen können,

302
00:26:20,995 --> 00:26:28,455
hat sich Ihr Vorlagencode im Vergleich zu zuvor deutlich vereinfacht.

303
00:26:28,455 --> 00:26:32,545
Damit

304
00:26:32,545 --> 00:26:36,600
wurde die gesamte Fehlervalidierung, die ich benötige, in meine Vorlage hinzugefügt und meine Vorlage wird jetzt aktualisiert,

305
00:26:36,600 --> 00:26:38,900
also speichern wir die Änderungen.

306
00:26:39,560 --> 00:26:46,800
Zwei andere Dinge, die ich hinzufügen muss, sind das Attribut

307
00:26:46,800 --> 00:26:53,255
E-Mail zu diesem speziellen Feld namens E-Mail.

308
00:26:53,255 --> 00:26:56,625
Also, denken Sie daran, dass wir die E-Mail Validator hier hinzugefügt.

309
00:26:56,625 --> 00:26:58,300
Also, zusammen mit den erforderlichen,

310
00:26:58,300 --> 00:27:03,655
werde ich E-Mail auch dem Eingabefeld hier hinzufügen.

311
00:27:03,655 --> 00:27:05,655
In ähnlicher Weise

312
00:27:05,655 --> 00:27:08,115
verwenden wir für das Telnum das Muster dort.

313
00:27:08,115 --> 00:27:14,670
Also, ich werde das Muster hinzufügen, so dass dies das Eingabefeld für das Telnum ist.

314
00:27:14,670 --> 00:27:24,485
Also, innerhalb des Eingabefeldes werde ich Muster hinzufügen, ist gleich und

315
00:27:24,485 --> 00:27:29,250
das Muster, das ich hinzufügen werde, ist

316
00:27:29,250 --> 00:27:35,350
innerhalb von eckigen Klammern Null bis neun,

317
00:27:35,350 --> 00:27:37,875
und dann einen Stern dort setzen.

318
00:27:37,875 --> 00:27:45,430
Also, was bedeutet, dass dies alles Null bis neun mehrmals wiederholt ist.

319
00:27:45,430 --> 00:27:51,045
Die Telefonnummer kann also beliebige Nummern zwischen Null und neun enthalten.

320
00:27:51,045 --> 00:27:53,370
Eine beliebige Anzahl dieser Zahlen.

321
00:27:53,370 --> 00:27:57,085
Sie können auch eine minlength und maxlength auf das Telnumfeld setzen,

322
00:27:57,085 --> 00:28:01,100
wenn für Ihr Land die Telefonnummer ein festes Format hat,

323
00:28:01,100 --> 00:28:02,440
können Sie das auch tun.

324
00:28:02,440 --> 00:28:05,410
Also, das kann leicht gemacht werden.

325
00:28:05,410 --> 00:28:08,130
Aber in dieser Übung

326
00:28:08,130 --> 00:28:13,470
habe ich die Minlength und Maxlength Einschränkung für das Telnum hier nicht hinzugefügt.

327
00:28:13,470 --> 00:28:15,720
Nun, da wir alle Updates durchgeführt haben,

328
00:28:15,720 --> 00:28:23,150
speichern wir die Änderungen und dann gehen und werfen einen Blick auf das Formular im Browser.

329
00:28:23,150 --> 00:28:25,640
Gehen Sie jetzt zum Browser,

330
00:28:25,640 --> 00:28:28,920
lassen Sie uns zum Formular hier scrollen.

331
00:28:28,920 --> 00:28:34,775
Lassen Sie uns den Vornamen eingeben und wie Sie sehen, wenn Sie nur ein einzelnes Zeichen eingeben,

332
00:28:34,775 --> 00:28:38,290
dann wird die Fehlermeldung sofort angezeigt,

333
00:28:38,290 --> 00:28:42,490
aber in dem Moment, in dem Sie zusätzliche Zeichen eingeben, dass die Fehlermeldung verschwindet.

334
00:28:42,490 --> 00:28:44,980
In ähnlicher Weise für den Nachnamen.

335
00:28:44,980 --> 00:28:50,794
Wenn Sie für die Telefonnummer versuchen, etwas anderes als Zahlen

336
00:28:50,794 --> 00:28:53,830
einzugeben, werden die Fehlermeldungen angezeigt.

337
00:28:54,240 --> 00:28:56,575
So können Sie,

338
00:28:56,575 --> 00:29:04,790
ähnlich für E-Mail eingeben, so dass Sie sehen, dass das E-Mail-Format nicht ungültig angezeigt wird.

339
00:29:04,790 --> 00:29:10,380
Wenn Sie die E-Mail nicht haben, dann wird auch die Fehlermeldung angezeigt.

340
00:29:10,380 --> 00:29:14,415
Aber in dem Moment, in dem Sie so etwas eingeben,

341
00:29:14,415 --> 00:29:18,745
wird dies als gültiges E-Mail-Format betrachtet, so dass es akzeptiert wird.

342
00:29:18,745 --> 00:29:23,895
Also, das ist der Satz von Fehlermeldungen und die Formularüberprüfung

343
00:29:23,895 --> 00:29:30,080
vollständig im Code durchgeführt, wie in dieser speziellen Übung getan.

344
00:29:30,080 --> 00:29:33,625
Damit schließen wir diese Übung ab.

345
00:29:33,625 --> 00:29:40,200
In dieser Übung haben wir gesehen, dass die Verwendung der Wertänderung beobachtbar ist,

346
00:29:40,200 --> 00:29:46,915
und wir haben auch gesehen, wie wir Formularvalidierung in unserem Typoskriptcode durchführen können.

347
00:29:46,915 --> 00:29:49,040
Damit ist diese Übung abgeschlossen.

348
00:29:49,040 --> 00:29:52,030
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit

349
00:29:52,030 --> 00:29:56,310
der Nachricht reaktive Formen Teil drei zu machen.