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

2
00:00:04,979 --> 00:00:09,281
Lassen Sie uns wissen, kurz Wert Formen und Formen Unterstützung in Angular.

3
00:00:09,281 --> 00:00:14,748
Wir haben bereits die Verwendung von Formularen im vorherigen Bootstrap-Kurs gesehen und

4
00:00:14,748 --> 00:00:20,139
wir haben gesehen, wie Bootstrap es uns ermöglicht, die Standard-HDMI-Formulare zu stylen.

5
00:00:20,139 --> 00:00:24,664
In dieser Lektion werden wir die Angular-Unterstützung für Formulare,

6
00:00:24,664 --> 00:00:30,200
zwei verschiedene Arten von Formularen, vorlagengesteuerte Formulare und reaktive Formulare betrachten.

7
00:00:30,200 --> 00:00:32,450
Wir werden den Unterschied zwischen den beiden betrachten, und

8
00:00:32,450 --> 00:00:35,670
wo jeder von ihnen in unserer Angular-Anwendung geeignet ist.

9
00:00:35,670 --> 00:00:39,400
In

10
00:00:39,400 --> 00:00:43,490
dieser Lektion und in der nächsten Lektion werden wir die Vor- und Nachteile jedes Ansatzes genauer betrachten.

11
00:00:44,910 --> 00:00:50,880
Außerdem werden wir uns die Formularvalidierung ansehen, wie Angular die Formularvalidierung unterstützt

12
00:00:50,880 --> 00:00:55,600
und wie wir die Formularvalidierung für unser Template-gesteuertes Formular

13
00:00:55,600 --> 00:01:00,420
in der nächsten Vorlesung nach der Übung durchführen können.

14
00:01:02,400 --> 00:01:06,867
Wir haben bereits erkannt, dass Formulare ein kohärentes, effektives und

15
00:01:06,867 --> 00:01:10,230
überzeugendes Dateneingabe-Erlebnis für Benutzer unterstützen.

16
00:01:10,230 --> 00:01:14,940
Sie sehen, dass Formulare überall auf Websites verwendet werden.

17
00:01:14,940 --> 00:01:19,520
Wenn Sie sich beispielsweise bei einer Website anmelden müssen, müssen Sie Ihre Benutzer-ID und Ihr Passwort eingeben.

18
00:01:19,520 --> 00:01:22,210
Oder wenn Sie zum Beispiel Informationen einreichen müssen.

19
00:01:22,210 --> 00:01:26,871
Wenn Sie ein Filmticket buchen, oder wenn Sie

20
00:01:26,871 --> 00:01:32,027
eine Bestellung in einem Online-Lebensmittelgeschäft oder in vielen anderen Anwendungsfällen aufgeben,

21
00:01:32,027 --> 00:01:37,482
werden Formulare häufig verwendet,

22
00:01:37,482 --> 00:01:43,360
um Benutzern eine umfassende Möglichkeit zur Eingabe von Informationen in die Websites oder die Webanwendung zu bieten.

23
00:01:43,360 --> 00:01:47,922
Das Angular-Framework bietet umfassende Unterstützung für

24
00:01:47,922 --> 00:01:51,670
Formulare, einschließlich der Validierung von Formularen und Formularen.

25
00:01:51,670 --> 00:01:57,379
Hier nutzen wir die Angular-Unterstützung für bidirektionale Datenbindung

26
00:01:57,379 --> 00:02:03,690
und Nachverfolgung von Änderungen, die wir in den Formularelementen vornehmen, und auch Formularvalidierung.

27
00:02:03,690 --> 00:02:07,030
Wenn Sie also Daten in ein Eingabefelder in Ihrem Formular eingeben, werden

28
00:02:07,030 --> 00:02:11,330
die Daten automatisch mit Angular-Unterstützung für Formulare ausgewertet.

29
00:02:11,330 --> 00:02:15,980
Wir werden einige davon genauer betrachten, während wir die Lektionen durchlaufen.

30
00:02:15,980 --> 00:02:21,010
Lassen Sie mich Sie schnell an HTML-Formulare selbst erinnern.

31
00:02:21,010 --> 00:02:24,790
Sie wissen bereits, dass Formulare durch das

32
00:02:25,910 --> 00:02:28,200
Formularelement in Ihrer HTML-Seite unterstützt werden.

33
00:02:28,200 --> 00:02:32,734
Zusammen mit dem Formularelement können Sie innerhalb des Formular-Tags auch Dinge

34
00:02:32,734 --> 00:02:37,561
wie <input>,, <textarea><select>, und <button>s und viele mehr einschließen.

35
00:02:37,561 --> 00:02:42,585
Wir werden sehen, wie die Angular-Unterstützung zusammen mit den

36
00:02:42,585 --> 00:02:47,608
HTML-Formularelementen funktioniert, ermöglichen es uns, zwei verschiedene Arten von Formen,

37
00:02:47,608 --> 00:02:52,292
vorlagengesteuerte Formen und auch reaktive Formen in Angular zu entwerfen.

38
00:02:52,292 --> 00:02:58,585
In dieser Lektion konzentrieren wir uns auf die Winkelunterstützung für vorlagengesteuerte Formulare.

39
00:02:58,585 --> 00:03:03,125
In einer vorlagengesteuerten Form werden sie die Angular-Vorlage zusammen mit

40
00:03:03,125 --> 00:03:07,250
den Formularelementen verwenden, die wir gerade gesehen haben, um Formulare zu

41
00:03:07,250 --> 00:03:10,646
konstruieren und die Angular-Unterstützung für vorlagengesteuerte Formulare zu nutzen.

42
00:03:10,646 --> 00:03:15,432
Und wir werden in der Lage sein, die Angular formspezifischen Direktiven an die

43
00:03:15,432 --> 00:03:20,450
Formularelemente innerhalb unserer Vorlagen zu binden und dann die bidirektionale Datenbindung zu nutzen,

44
00:03:20,450 --> 00:03:25,336
die auch Validierung und Fehlerunterstützung bilden, die Angular für uns bereitstellt.

45
00:03:25,336 --> 00:03:28,128
In der Übung, die sofort folgt,

46
00:03:28,128 --> 00:03:32,512
wird dieser Vortrag untersuchen, wie wir ein Template-getriebenes Formular entwerfen können.

47
00:03:32,512 --> 00:03:37,164
Insbesondere werden wir auch untersuchen, wie die bidirektionale Datenbindung mit

48
00:03:37,164 --> 00:03:41,986
Angular unterstützt, mit der ngModel Direktive verwendet werden kann, um

49
00:03:41,986 --> 00:03:44,894
die Informationen aus Ihrem Formular an

50
00:03:44,894 --> 00:03:50,430
einige JavaScript-Variablen zu binden, die Sie innerhalb Ihrer Klassen deklariert haben.

51
00:03:50,430 --> 00:03:53,610
In der Übung, die dieser Vorlesung unmittelbar folgt,

52
00:03:53,610 --> 00:03:56,960
schauen wir uns an, wie wir eine vorlagengesteuerte Form entwerfen können.

53
00:03:56,960 --> 00:04:01,350
Insbesondere werden wir uns ansehen, wie die bidirektionale Datenbindung, die Angular mit

54
00:04:01,350 --> 00:04:06,280
der ngModel Direktive unterstützt, genutzt werden kann, um die Informationen aus

55
00:04:06,280 --> 00:04:10,870
Ihrem Formular an einige JavaScript-Variablen zu binden, die Sie innerhalb Ihrer Klassen deklarieren.

56
00:04:10,870 --> 00:04:14,860
Und hier kommt uns die Banane in einer Kiste, auf die wir

57
00:04:14,860 --> 00:04:19,140
vorhin mit der NGModel-Richtlinie Bezug genommen haben, zu Hilfe.

58
00:04:19,140 --> 00:04:22,880
Wenn wir die Übungen durchlaufen, wird dies noch deutlicher.

59
00:04:22,880 --> 00:04:27,139
Lassen Sie uns nun lernen, wie Sie die Angular-Unterstützung für

60
00:04:27,139 --> 00:04:32,585
vorlagengesteuerte Formulare nutzen können, um unsere Formulare in den Übungen zu entwerfen.

61
00:04:32,585 --> 00:04:36,014
( MUSIK)