1
00:00:04,070 --> 00:00:10,290
Wir haben gerade das Lernen über Angular Template-gesteuerte Formulare abgeschlossen und

2
00:00:10,290 --> 00:00:14,300
in der Übung auch unsere erste vorlagengesteuerte Form konstruiert.

3
00:00:14,300 --> 00:00:18,210
Wenn der Benutzer nun Informationen in die Formularfelder eingibt,

4
00:00:18,210 --> 00:00:23,655
möchten wir möglicherweise die Daten überprüfen, die der Benutzer in diese Datenfelder eingibt.

5
00:00:23,655 --> 00:00:25,630
In den frühen Tagen des Webs

6
00:00:25,630 --> 00:00:28,950
bestand die einzige Möglichkeit, die Daten zu überprüfen, darin, die Daten

7
00:00:28,950 --> 00:00:32,580
an den Server zu senden und dann die Prüfungen auf der Serverseite durchzuführen

8
00:00:32,580 --> 00:00:37,155
und dann das Ergebnis von der Serverseite zu erhalten.

9
00:00:37,155 --> 00:00:41,935
Aber heutzutage, mit leistungsstarken clientseitigen Frameworks wie Angular,

10
00:00:41,935 --> 00:00:46,580
kann ein Großteil der Datenvalidierung leicht auf der Clientseite

11
00:00:46,580 --> 00:00:52,070
selbst durchgeführt werden, und wir können leicht viele der Fehler auf der Clientseite erfassen

12
00:00:52,070 --> 00:00:56,885
und dann sogar dem Benutzer Hinweise auf die Fehler geben.

13
00:00:56,885 --> 00:01:00,170
Nun, hier werden wir uns die Angular-Unterstützung für die

14
00:01:00,170 --> 00:01:03,725
Formularvalidierung ansehen und dann wie wir Formularvalidierung durchführen können,

15
00:01:03,725 --> 00:01:11,170
und dann Fehlermeldungen an den Benutzer in den Ansichten anzeigen können.

16
00:01:11,260 --> 00:01:17,455
HTML5 verfügt bereits über eine integrierte Unterstützung für die Formularvalidierung.

17
00:01:17,455 --> 00:01:20,750
Aber wenn wir Angular für unsere Anwendung verwenden,

18
00:01:20,750 --> 00:01:23,840
müssen wir zuerst die HTML5-Formularvalidierung deaktivieren,

19
00:01:23,840 --> 00:01:25,640
so dass die Verantwortung für die

20
00:01:25,640 --> 00:01:29,750
Formularvalidierung auf die Angular-Anwendung übertragen wird.

21
00:01:29,750 --> 00:01:32,240
Um dies für das Formular zu tun,

22
00:01:32,240 --> 00:01:34,525
wie wir bereits in der Übung gesehen haben,

23
00:01:34,525 --> 00:01:40,760
fügen wir das novalidate-Attribut in das Formular-Tag dort ein,

24
00:01:40,760 --> 00:01:43,910
so dass dies sicherstellt, dass der Winkel

25
00:01:43,910 --> 00:01:47,585
die Verantwortung übernimmt, Formularvalidierung durchzuführen.

26
00:01:47,585 --> 00:01:50,645
Wie hilft Angular uns bei der Formularvalidierung?

27
00:01:50,645 --> 00:01:55,324
Das werden wir als Nächstes genauer untersuchen.

28
00:01:55,324 --> 00:01:59,600
Wann immer Sie eine Formularüberprüfung in Angular durchführen

29
00:01:59,600 --> 00:02:05,570
müssen, insbesondere wenn Sie auf die Formularfelder in Ihrer Vorlage verweisen müssen,

30
00:02:05,570 --> 00:02:09,960
benötigen Sie die Hilfe von Angular Template-Referenzvariablen.

31
00:02:09,960 --> 00:02:12,725
Wie geben wir eine Template-Referenzvariable an?

32
00:02:12,725 --> 00:02:15,485
Die Vorlagenreferenzvariable kann für

33
00:02:15,485 --> 00:02:19,235
jedes Element angegeben werden, indem eine Template-Variable wie diese verknüpft wird.

34
00:02:19,235 --> 00:02:22,880
Zum Beispiel

35
00:02:22,880 --> 00:02:29,760
geben wir in diesem Fall für das Formular das Anmeldeformular an, das gleich ngForm ist.

36
00:02:29,760 --> 00:02:33,160
In ähnlicher Weise

37
00:02:33,160 --> 00:02:35,050
würden Sie für ein Eingabefeld beispielsweise Schrägstrich sagen,

38
00:02:35,050 --> 00:02:39,725
oder vielmehr #username ist gleich ngModel.

39
00:02:39,725 --> 00:02:46,130
In diesem Fall sind das Anmeldeformular und der Benutzername alle Vorlagenreferenzvariablen.

40
00:02:46,130 --> 00:02:49,370
Diese Vorlagenreferenzvariablen können dann innerhalb

41
00:02:49,370 --> 00:02:53,800
unserer Angular-Vorlage verwendet werden, um auf diese Felder zu verweisen.

42
00:02:53,800 --> 00:02:56,245
In der Vorlage selbst

43
00:02:56,245 --> 00:02:59,060
können Sie also die Steuerelementzustände für

44
00:02:59,060 --> 00:03:03,289
diese Felder überprüfen, einschließlich Dinge wie, ob das Feld gültig ist,

45
00:03:03,289 --> 00:03:04,760
ob es schmutzig ist

46
00:03:04,760 --> 00:03:06,430
oder ob es einige Fehler aufweist.

47
00:03:06,430 --> 00:03:12,865
Wir werden diese Unterstützung nutzen, die Angular bietet, um die Formularvalidierung durchzuführen.

48
00:03:12,865 --> 00:03:15,964
Wie ich bereits erwähnt habe, werden wir

49
00:03:15,964 --> 00:03:21,870
die Vorlagenreferenzvariablen nutzen, um den Kontrollstatus zu sammeln, um nach Informationen zu suchen.

50
00:03:21,870 --> 00:03:27,370
So können Sie zum Beispiel username.pristine in Ihrer Vorlage sagen.

51
00:03:27,370 --> 00:03:30,440
Das bezieht sich also auf die Überprüfung des Zustands,

52
00:03:30,440 --> 00:03:33,960
ob sich das jeweilige Steuerelement im makellosen Zustand befindet,

53
00:03:33,960 --> 00:03:39,080
was bedeutet, dass es vom Benutzer bisher nicht berührt und geändert wurde.

54
00:03:39,080 --> 00:03:41,840
Das Dirty ist das Gegenteil von

55
00:03:41,840 --> 00:03:45,050
makellos, was bedeutet, dass, wenn ein Feld schmutzig ist,

56
00:03:45,050 --> 00:03:49,105
das bedeutet, dass das Feld in der Vergangenheit vom Benutzer geändert wurde.

57
00:03:49,105 --> 00:03:53,090
Ebenso

58
00:03:53,090 --> 00:03:58,295
können wir anhand des gültigen und ungültigen Kontrollstatus prüfen, ob die Informationen in diesem Feld gültig oder ungültig sind,

59
00:03:58,295 --> 00:04:02,360
abhängig von der Spezifikation Ihrer Prüfung auf

60
00:04:02,360 --> 00:04:06,530
die Gültigkeit oder den ungültigen Zustand dieses Feldes.

61
00:04:06,530 --> 00:04:11,990
So können Sie beispielsweise überprüfen, ob Sie ein Feld als erforderlich deklariert haben.

62
00:04:11,990 --> 00:04:14,930
Das bedeutet, dass Sie erwartet haben, dass der Benutzer

63
00:04:14,930 --> 00:04:18,790
mindestens einige Informationen in das Feld eingibt.

64
00:04:18,790 --> 00:04:24,280
Das Fehlen von Informationen innerhalb des Felds in Ihrem Formular bedeutet, dass das Feld ungültig ist.

65
00:04:24,280 --> 00:04:28,670
In ähnlicher Weise können Sie das Festland oder die maximale Länge eines Feldwertes angeben,

66
00:04:28,670 --> 00:04:31,970
so dass Sie leicht überprüfen können, ob die Anzahl der Zeichen

67
00:04:31,970 --> 00:04:35,500
innerhalb eines Feldes etwa

68
00:04:35,500 --> 00:04:37,660
die Hauptlänge oder unter der maximalen Länge ist usw.

69
00:04:37,660 --> 00:04:39,380
In der folgenden Übung

70
00:04:39,380 --> 00:04:42,740
werden wir diese verschiedenen Formular-Validierungsansätze für

71
00:04:42,740 --> 00:04:47,080
unser vorlagenorientiertes Formular anwenden, das wir in der vorherigen Übung entwickelt haben.

72
00:04:47,080 --> 00:04:51,564
In Ihrem Formular

73
00:04:51,564 --> 00:04:54,170
können Sie beispielsweise die Schaltfläche „Absenden“ deaktivieren, indem Sie prüfen

74
00:04:54,170 --> 00:04:56,770
, ob sich das Formular im gültigen Status befindet oder nicht.

75
00:04:56,770 --> 00:05:00,650
In diesem Fall werden Sie die Deaktivierten zuordnen

76
00:05:00,650 --> 00:05:05,875
und es gleich dem Anmeldeform.ungültig setzen,

77
00:05:05,875 --> 00:05:07,970
bedeutet, dass, wenn das Formular ungültig ist,

78
00:05:07,970 --> 00:05:10,480
diese Schaltfläche in diesem Fall deaktiviert wird.

79
00:05:10,480 --> 00:05:15,910
Daher wird der Benutzer nicht berechtigt, die Informationen über dieses spezielle Formular zu übermitteln.

80
00:05:15,910 --> 00:05:18,995
Dies ist also eine Möglichkeit, sicherzustellen, dass

81
00:05:18,995 --> 00:05:22,700
falsche Einträge vom Benutzer nicht über das Formular übermittelt werden.

82
00:05:22,700 --> 00:05:25,100
Ebenso

83
00:05:25,100 --> 00:05:30,080
können Sie bei bestimmten Feldern überprüfen, ob das Feld ausgefüllt wurde oder nicht.

84
00:05:30,080 --> 00:05:33,125
Wenn Sie also angeben, dass ein bestimmtes Feld erforderlich ist,

85
00:05:33,125 --> 00:05:36,620
indem Sie das erforderliche Attribut für das Eingabefeld angeben,

86
00:05:36,620 --> 00:05:39,320
können Sie überprüfen, ob ein Fehler des

87
00:05:39,320 --> 00:05:43,250
erforderlichen Typs für das jeweilige Feldelement dort ausgelöst wird.

88
00:05:43,250 --> 00:05:45,020
So

89
00:05:45,020 --> 00:05:47,390
können Sie beispielsweise in Ihrem Code sogar angeben, um den Benutzer darüber zu informieren

90
00:05:47,390 --> 00:05:51,035
, dass ein bestimmtes Feld falsch ist.

91
00:05:51,035 --> 00:05:56,885
Sie verwenden den mat-error, um das zu signalisieren.

92
00:05:56,885 --> 00:06:01,230
Also, das mat-error -Tag, das

93
00:06:01,230 --> 00:06:06,555
wiederum von der Angular Material Form Unterstützung kommt, wie Sie hier sehen,

94
00:06:06,555 --> 00:06:09,195
wenn das nGIF sich als true herausstellt,

95
00:06:09,195 --> 00:06:15,560
dann wird diese Nachricht unten im Eingabefeld dort angezeigt,

96
00:06:15,560 --> 00:06:17,100
und ähnlich wie das Eingabefeld,

97
00:06:17,100 --> 00:06:20,405
wird als rot auf dem Bildschirm markiert.

98
00:06:20,405 --> 00:06:25,085
Dies ist also etwas, das Sie überprüfen und

99
00:06:25,085 --> 00:06:30,000
sicherstellen und auch Fehlermeldungen an den Benutzer senden werden.

100
00:06:30,000 --> 00:06:31,740
In der folgenden Übung

101
00:06:31,740 --> 00:06:35,980
werden wir diesen Ansatz anwenden, um den Benutzernamen und das Passwort zu überprüfen.

102
00:06:35,980 --> 00:06:40,700
Wir geben an, dass diese Felder erforderlich sind und wenn der Benutzer

103
00:06:40,700 --> 00:06:45,565
nach dem Berühren des Feldes keine Informationen in diese Felder eingibt, stellen

104
00:06:45,565 --> 00:06:51,210
wir sicher, dass dem Benutzer die entsprechende Fehlermeldung angezeigt wird.

105
00:06:51,210 --> 00:06:57,469
Also, mit diesem schnellen Verständnis der Formularvalidierung in Angular,

106
00:06:57,469 --> 00:06:58,970
gehen wir zu der Übung,

107
00:06:58,970 --> 00:07:03,410
wo wir überprüfen, wie wir einfache Formularvalidierung für

108
00:07:03,410 --> 00:07:08,160
unser Anmeldeformular durchführen und dann in der Lage sein, Fehlermeldungen anzuzeigen.

109
00:07:08,160 --> 00:07:12,470
Wir werden wieder zur Formularvalidierung in einer der späteren Übungen zurückkommen,

110
00:07:12,470 --> 00:07:19,660
nachdem wir mehr über die reaktive Unterstützung in Angular gelernt haben.