1
00:00:00,000 --> 00:00:08,934
[MUSIK] In der

2
00:00:08,934 --> 00:00:12,310
vorherigen Lektion haben wir gerade das Lernen von vorlagengesteuerten Formularen in eckigen Winkeln abgeschlossen.

3
00:00:12,310 --> 00:00:18,336
Angular unterstützt auch eine andere Möglichkeit, Formen als reaktive Formulare zu entwerfen,

4
00:00:18,336 --> 00:00:25,390
die reaktiven Formulare verwenden den reaktiven Stil der Programmierung für unterstützende Formulare.

5
00:00:25,390 --> 00:00:28,050
Wir werden kurz über reaktive Programmierung in

6
00:00:28,050 --> 00:00:31,110
einer der späteren Lektionen in diesem Modul sprechen.

7
00:00:31,110 --> 00:00:34,180
Aber im Moment werden wir uns mit reaktiven Formen beschäftigen und

8
00:00:34,180 --> 00:00:38,410
sehen, wie wir reaktive Formen in eckigen Formen entwerfen können und

9
00:00:38,410 --> 00:00:44,430
was sind die einzigartigen Merkmale der Ausführung reaktiver Formen in eckigen nächsten.

10
00:00:46,150 --> 00:00:52,310
Der reaktive Stil der Programmierung befürwortet eine explizite Verwaltung von

11
00:00:52,310 --> 00:00:58,500
Daten, die zwischen dem Nicht-UI-Datenmodell und dem UI-orientierten

12
00:00:58,500 --> 00:01:04,280
Formularmodell fließen, und dies ist der Ansatz, den reaktive Formulare in Angular annehmen.

13
00:01:04,280 --> 00:01:09,240
Nun, das macht für Sie in diesem Moment vielleicht nicht viel Sinn, aber wenn wir diese

14
00:01:09,240 --> 00:01:14,860
Übung und den Vortrag abschließen, wird es Ihnen noch deutlicher,

15
00:01:14,860 --> 00:01:21,530
warum der reaktive Ansatz zu diesem Formulardesign in bestimmten Kontexten passt.

16
00:01:21,530 --> 00:01:26,630
Im reaktiven Ansatz erstellen wir nun einen Baum von

17
00:01:26,630 --> 00:01:30,810
Winkelform-Steuerobjekten innerhalb der Komponentenklasse.

18
00:01:30,810 --> 00:01:33,300
Jetzt in den vorlagengesteuerten Formularen, die Sie zuvor gesehen haben,

19
00:01:34,450 --> 00:01:38,870
entwerfen wir die Formulare mit dem HTML-Vorlagenansatz, so

20
00:01:38,870 --> 00:01:44,075
dass alle Formularsteuerelemente, die wir in diesem Formular in der HTML-Vorlage

21
00:01:44,075 --> 00:01:49,667
eingefügt werden, und wir verwalten hauptsächlich Daten und sie sind mit ihrem

22
00:01:49,667 --> 00:01:55,770
Komponenten-Objekt über das NG-Modell gebunden direkt.

23
00:01:55,770 --> 00:02:01,280
Bei diesem Ansatz werden wir diese Formularstruktur in unserer Komponente erstellen und

24
00:02:01,280 --> 00:02:06,220
dann die Formularstruktur in feste Steuerelemente in unserer Vorlage binden. Daher

25
00:02:06,220 --> 00:02:10,860
binden wir den Formularbaum, den wir

26
00:02:10,860 --> 00:02:15,920
innerhalb unserer Komponentenklasse erstellen, an die nativen

27
00:02:15,920 --> 00:02:20,910
Formularelemente innerhalb unserer Vorlagendatei dort.

28
00:02:20,910 --> 00:02:25,530
In diesem Ansatz hat die Komponentenklasse sofortigen

29
00:02:25,530 --> 00:02:30,390
Zugriff auf sowohl das Datenmodell als auch die Formularsteuerungsstruktur und so

30
00:02:30,390 --> 00:02:36,575
können wir dann das Datenmodell übernehmen und es in die Formularsteuerungsstruktur schieben und

31
00:02:36,575 --> 00:02:40,985
entsprechend die Informationen aus der Formularsteuerungsstruktur und

32
00:02:40,985 --> 00:02:43,355
Ordnen Sie es dann dem Datenmodell zu.

33
00:02:43,355 --> 00:02:48,355
So kann das Datenmodell, das vom Backend hereinkommt, der

34
00:02:48,355 --> 00:02:53,410
Formular-Steuerstruktur zugeordnet werden, die in der Ansicht durch diese Vorlage reflektiert wird,

35
00:02:54,550 --> 00:02:58,280
und die Brücke zwischen ihnen wird innerhalb der Komponentenklasse durchgeführt,

36
00:02:58,280 --> 00:03:02,660
indem die Formularstruktur innerhalb der Komponentenklasse erstellt wird.

37
00:03:02,660 --> 00:03:07,330
Nun, das macht für Sie in diesem Moment nicht viel Sinn, aber

38
00:03:07,330 --> 00:03:12,230
wenn wir die Übung machen, wird es Ihnen noch klarer, wie diese

39
00:03:12,230 --> 00:03:17,080
Bindung zwischen dem Datenmodell und der festen Kontrollstruktur

40
00:03:17,080 --> 00:03:22,185
innerhalb der Komponentenklasse im Typskriptcode der Komponenten durchgeführt werden kann -Klasse.

41
00:03:22,185 --> 00:03:26,700
Hier werden wir reaktive Muster, Tests und

42
00:03:26,700 --> 00:03:31,160
Validierung zu großen Vorteil nutzen, so dass dieser reaktive

43
00:03:31,160 --> 00:03:35,170
Formularansatz reaktive Muster der Programmierung unterstützt, wie ich sagte, wir werden

44
00:03:35,170 --> 00:03:39,880
ein wenig später in diesem Modul reaktive reaktive Programmierung sprechen.

45
00:03:40,900 --> 00:03:45,470
Auch die Tatsache, dass wir die Formulare im Code erstellen

46
00:03:45,470 --> 00:03:50,840
, bedeutet, dass das Testen und Auswerten von Formularen viel einfacher wird.

47
00:03:50,840 --> 00:03:54,040
Template-gesteuerte Formulare sind sehr schwer zu testen

48
00:03:54,040 --> 00:03:58,770
, da ein Großteil der Struktur im Vorlagencode enthalten ist. Daher

49
00:03:58,770 --> 00:04:03,800
eignet sich der reaktive Ansatz viel besser für Komponententests und

50
00:04:03,800 --> 00:04:10,150
auch für die Formularvalidierung, wie wir ein wenig später in der Übung sehen werden.

51
00:04:10,150 --> 00:04:15,650
Lassen Sie uns kurz über einige der Vorteile der Verwendung reaktiver Formen nachdenken.

52
00:04:15,650 --> 00:04:20,820
Einer der Vorteile ist, dass die Werte in der Form, dass Elemente

53
00:04:20,820 --> 00:04:25,986
sofort verfügbar und synchron mit dem abstrakten Code sind.

54
00:04:25,986 --> 00:04:29,990
In vorlagengesteuerter Form nimmt es Zyklus für

55
00:04:29,990 --> 00:04:35,510
alle Änderungen an, die die Vorlage geschrieben wurden, um dort in Ihren Code reflektiert zu werden

56
00:04:35,510 --> 00:04:40,990
, aber im reaktiven Ansatz werden das Synchronybit,

57
00:04:40,990 --> 00:04:46,491
die Daten und die Ansicht eng gepflegt.

58
00:04:46,491 --> 00:04:50,680
Zweitens

59
00:04:50,680 --> 00:04:55,560
sind die reaktiven Formen, wie ich bereits erwähnt, einfacher zu Unit-Tests zu tun, und dies wird sehr entscheidend,

60
00:04:55,560 --> 00:05:01,240
wenn Sie eine sehr komplexe Winkelreplikationen entwerfen.

61
00:05:01,240 --> 00:05:04,320
Die Reaktiven Formulare werden für einige

62
00:05:04,320 --> 00:05:08,240
Klassen unterstützt, die für eckige Formulare Bibliothek verfügbar sind.

63
00:05:08,240 --> 00:05:13,390
Einer von ihnen ist die FormControl-Klasse, die die individuelle Formularsteuerung befähigt ist

64
00:05:13,390 --> 00:05:19,350
, dass wir in unserer Form die einzelnen Elemente einschließen und uns auch ermöglicht,

65
00:05:19,350 --> 00:05:24,360
den Wert dieser Grenzen zu verfolgen und Validierung dieser Elemente zu tun.

66
00:05:25,500 --> 00:05:29,110
Die FormGroup ist eine Gruppe von FormControl.

67
00:05:29,110 --> 00:05:32,420
Wenn Sie also FormControls als Gruppe organisieren und

68
00:05:32,420 --> 00:05:37,700
dann Informationen über diese Gruppe als Ganzes nachverfolgen möchten,

69
00:05:37,700 --> 00:05:43,240
können Sie mit FormGroup eine Gruppe von FormControls zusammenfassen.

70
00:05:44,780 --> 00:05:48,850
Darüber hinaus haben wir auch eine AbstractControl-Klasse, die eine abstrakte

71
00:05:48,850 --> 00:05:53,930
basierte Klasse für FormControl-Klassen ist, die auch zu unserem Vorteil verwendet werden kann,

72
00:05:53,930 --> 00:05:58,500
obwohl wir sie später speziell in der Übung sehen möchten,

73
00:05:58,500 --> 00:06:02,630
aber wir werden sie zu einem späteren Zeitpunkt wieder verwenden.

74
00:06:05,600 --> 00:06:10,430
Und wir haben auch eine FormArray-Klasse, mit der Sie

75
00:06:10,430 --> 00:06:15,410
ein numerisch indiziertes Array von AbstractControl-Instanzen definieren können

76
00:06:15,410 --> 00:06:19,460
, wieder, sowohl die AbstractControl als auch das FormArray, wir werden nicht explizit

77
00:06:19,460 --> 00:06:24,950
in dieser speziellen Lektion untersuchen, aber wir werden sie später im Kurs sehen.

78
00:06:24,950 --> 00:06:28,070
Ein weiterer interessanter Aspekt reaktiver Formulare

79
00:06:28,070 --> 00:06:29,950
ist die Verfügbarkeit des FormBuilders.

80
00:06:29,950 --> 00:06:36,925
Die FormBuilder-Klasse ermöglicht es, die Formulare in unserem TypeScript-Code zu erstellen und

81
00:06:36,925 --> 00:06:42,115
dann in der Lage zu sein, sie mit diesen Template-Steuerelementen dort zu binden.

82
00:06:42,115 --> 00:06:47,218
Um die Form Builder-Klasse zu verwenden, importieren Sie den Form Builder aus den eckigen

83
00:06:47,218 --> 00:06:52,483
Formularen und dann dort, nachdem Sie den Formulargenerator verwenden können, um das Formular zu konstruieren,

84
00:06:52,483 --> 00:06:57,424
wie wenn Sie verwenden und tun, was Ihre Formkonverter-Klassen und die

85
00:06:57,424 --> 00:07:03,040
Formulargruppenklassen, wie wir in der vorherigen Folie gesehen haben, ist dieser Code ein Etwas aufwändiger.

86
00:07:03,040 --> 00:07:08,180
Aber mit der FormBuilder-Klasse reduziert es die Wiederholungsinklitik von in Ihrem

87
00:07:08,180 --> 00:07:13,610
Code und macht es viel kompakter zum Definieren von Schriftarten.

88
00:07:13,610 --> 00:07:16,440
Wir werden die FormBuilder-Klasse als Ansatz zum

89
00:07:16,440 --> 00:07:19,760
Erstellen von Formularen in der folgenden Übung verwenden, und

90
00:07:19,760 --> 00:07:26,170
dieses Beispiel wird von der Übung abgeleitet, die Sie direkt nach dieser Vorlesung durchführen werden.

91
00:07:26,170 --> 00:07:31,320
So hier können Sie sehen, dass wir ein Formular aufgebaut haben, als eine Gruppe dieser

92
00:07:31,320 --> 00:07:39,100
Formular-Steuerelemente und jeder von ihnen hat einen bestimmten Namen und auch den Wert, den sie gegeben haben. Wenn Sie

93
00:07:39,100 --> 00:07:43,540
das Formularmodell in unserem Typoskriptcode erstellen,

94
00:07:43,540 --> 00:07:48,030
füllen Sie das Formularmodell nicht automatisch aus. Sie müssen ausschließlich

95
00:07:48,030 --> 00:07:51,190
das Formularmodell ausfüllen, insbesondere wenn Sie die Daten in einem Datenmodell abrufen.

96
00:07:51,190 --> 00:07:55,280
Dann muss das Datenmodell Ihrem Formularmodell zugeordnet werden,

97
00:07:55,280 --> 00:08:00,580
um die Werte zu füllen. -Modell und das Datenmodell werden in reaktiven Formularen getrennt gehalten.

98
00:08:00,580 --> 00:08:05,340
In den vorlagengesteuerten Formularen haben Sie gesehen, dass wir direkt versuchen, die

99
00:08:05,340 --> 00:08:09,990
Datenobjekte aus der Vorlagendatei zu unserem abstrakten Code.

100
00:08:09,990 --> 00:08:12,710
In diesem Fall werden das Formular und das Datenmodell getrennt gehalten, so

101
00:08:12,710 --> 00:08:17,610
dass alle Änderungen, die Sie an den

102
00:08:17,610 --> 00:08:22,660
DOM-Elementen in Ihrem Formular vornehmen, in das Formularmodell fließen und

103
00:08:22,660 --> 00:08:28,030
Sie müssen die Formulardaten explizit zurück zu

104
00:08:28,030 --> 00:08:33,670
diesem Datenmodell reflektieren, sogar über einen Dienst oder was auch immer Sie wählen,

105
00:08:33,670 --> 00:08:39,240
so dass diese Trennung uns hilft, unseren Code viel besser zu entwerfen, wie wir später sehen werden.

106
00:08:40,520 --> 00:08:45,490
Zwei Methoden stehen für uns zur Verfügung, um ein Formularmodell aus einem Datenmodell zu füllen.

107
00:08:45,490 --> 00:08:50,280
Wir haben die setValue () -Methode, die es uns ermöglicht, jedes Formularsteuerelement

108
00:08:50,280 --> 00:08:54,710
einem bestimmten Wert aus dem Datenmodell zuzuweisen, oder wir haben einen patchValue (), mit

109
00:08:54,710 --> 00:08:59,360
dem Sie nur einige Steuerelemente innerhalb Ihres Formularmodells aktualisieren können.

110
00:08:59,360 --> 00:09:02,970
Wenn Sie also das Datenmodell vom Backend, aus dem Datenmodell erhalten

111
00:09:02,970 --> 00:09:08,030
haben, können Sie die Werte in Ihr Formularmodell patchen oder die Werte aus

112
00:09:08,030 --> 00:09:13,130
Ihrem Datenmodell in Ihr Formularmodell zuordnen. Häufig erstellen wir das Datenmodell,

113
00:09:13,130 --> 00:09:18,740
das die Struktur des Formulars angemessen genau widerspiegelt.

114
00:09:18,740 --> 00:09:22,060
In der folgenden Übung würden Sie sehen, dass ich ein Datenmodell habe,

115
00:09:22,060 --> 00:09:24,210
das auf einer Klasse basiert,

116
00:09:24,210 --> 00:09:30,030
die sehr genau das Formularmodell widerspiegelt, das wir dort in unserem Beispiel verwenden.

117
00:09:31,740 --> 00:09:38,263
Mit diesem schnellen Verständnis reaktiver Formen gehen wir nun zu der Übung,

118
00:09:38,263 --> 00:09:43,880
in der wir eine reaktive Form innerhalb unserer eckigen Anwendung verdoppeln und auf

119
00:09:43,880 --> 00:09:47,958
dem Weg einige der Terminologie und

120
00:09:47,958 --> 00:09:52,866
auch einige der Ideen konsolidieren, die wir gerade in dieser Lektion erforscht haben.

121
00:09:52,866 --> 00:09:59,009
( MUSIK)