[MUSIK] In der
vorherigen Lektion haben wir gerade das Lernen von vorlagengesteuerten Formularen in eckigen Winkeln abgeschlossen.
Angular unterstützt auch eine andere Möglichkeit, Formen als reaktive Formulare zu entwerfen,
die reaktiven Formulare verwenden den reaktiven Stil der Programmierung für unterstützende Formulare.
Wir werden kurz über reaktive Programmierung in
einer der späteren Lektionen in diesem Modul sprechen.
Aber im Moment werden wir uns mit reaktiven Formen beschäftigen und
sehen, wie wir reaktive Formen in eckigen Formen entwerfen können und
was sind die einzigartigen Merkmale der Ausführung reaktiver Formen in eckigen nächsten.
Der reaktive Stil der Programmierung befürwortet eine explizite Verwaltung von
Daten, die zwischen dem Nicht-UI-Datenmodell und dem UI-orientierten
Formularmodell fließen, und dies ist der Ansatz, den reaktive Formulare in Angular annehmen.
Nun, das macht für Sie in diesem Moment vielleicht nicht viel Sinn, aber wenn wir diese
Übung und den Vortrag abschließen, wird es Ihnen noch deutlicher,
warum der reaktive Ansatz zu diesem Formulardesign in bestimmten Kontexten passt.
Im reaktiven Ansatz erstellen wir nun einen Baum von
Winkelform-Steuerobjekten innerhalb der Komponentenklasse.
Jetzt in den vorlagengesteuerten Formularen, die Sie zuvor gesehen haben,
entwerfen wir die Formulare mit dem HTML-Vorlagenansatz, so
dass alle Formularsteuerelemente, die wir in diesem Formular in der HTML-Vorlage
eingefügt werden, und wir verwalten hauptsächlich Daten und sie sind mit ihrem
Komponenten-Objekt über das NG-Modell gebunden direkt.
Bei diesem Ansatz werden wir diese Formularstruktur in unserer Komponente erstellen und
dann die Formularstruktur in feste Steuerelemente in unserer Vorlage binden. Daher
binden wir den Formularbaum, den wir
innerhalb unserer Komponentenklasse erstellen, an die nativen
Formularelemente innerhalb unserer Vorlagendatei dort.
In diesem Ansatz hat die Komponentenklasse sofortigen
Zugriff auf sowohl das Datenmodell als auch die Formularsteuerungsstruktur und so
können wir dann das Datenmodell übernehmen und es in die Formularsteuerungsstruktur schieben und
entsprechend die Informationen aus der Formularsteuerungsstruktur und
Ordnen Sie es dann dem Datenmodell zu.
So kann das Datenmodell, das vom Backend hereinkommt, der
Formular-Steuerstruktur zugeordnet werden, die in der Ansicht durch diese Vorlage reflektiert wird,
und die Brücke zwischen ihnen wird innerhalb der Komponentenklasse durchgeführt,
indem die Formularstruktur innerhalb der Komponentenklasse erstellt wird.
Nun, das macht für Sie in diesem Moment nicht viel Sinn, aber
wenn wir die Übung machen, wird es Ihnen noch klarer, wie diese
Bindung zwischen dem Datenmodell und der festen Kontrollstruktur
innerhalb der Komponentenklasse im Typskriptcode der Komponenten durchgeführt werden kann -Klasse.
Hier werden wir reaktive Muster, Tests und
Validierung zu großen Vorteil nutzen, so dass dieser reaktive
Formularansatz reaktive Muster der Programmierung unterstützt, wie ich sagte, wir werden
ein wenig später in diesem Modul reaktive reaktive Programmierung sprechen.
Auch die Tatsache, dass wir die Formulare im Code erstellen
, bedeutet, dass das Testen und Auswerten von Formularen viel einfacher wird.
Template-gesteuerte Formulare sind sehr schwer zu testen
, da ein Großteil der Struktur im Vorlagencode enthalten ist. Daher
eignet sich der reaktive Ansatz viel besser für Komponententests und
auch für die Formularvalidierung, wie wir ein wenig später in der Übung sehen werden.
Lassen Sie uns kurz über einige der Vorteile der Verwendung reaktiver Formen nachdenken.
Einer der Vorteile ist, dass die Werte in der Form, dass Elemente
sofort verfügbar und synchron mit dem abstrakten Code sind.
In vorlagengesteuerter Form nimmt es Zyklus für
alle Änderungen an, die die Vorlage geschrieben wurden, um dort in Ihren Code reflektiert zu werden
, aber im reaktiven Ansatz werden das Synchronybit,
die Daten und die Ansicht eng gepflegt.
Zweitens
sind die reaktiven Formen, wie ich bereits erwähnt, einfacher zu Unit-Tests zu tun, und dies wird sehr entscheidend,
wenn Sie eine sehr komplexe Winkelreplikationen entwerfen.
Die Reaktiven Formulare werden für einige
Klassen unterstützt, die für eckige Formulare Bibliothek verfügbar sind.
Einer von ihnen ist die FormControl-Klasse, die die individuelle Formularsteuerung befähigt ist
, dass wir in unserer Form die einzelnen Elemente einschließen und uns auch ermöglicht,
den Wert dieser Grenzen zu verfolgen und Validierung dieser Elemente zu tun.
Die FormGroup ist eine Gruppe von FormControl.
Wenn Sie also FormControls als Gruppe organisieren und
dann Informationen über diese Gruppe als Ganzes nachverfolgen möchten,
können Sie mit FormGroup eine Gruppe von FormControls zusammenfassen.
Darüber hinaus haben wir auch eine AbstractControl-Klasse, die eine abstrakte
basierte Klasse für FormControl-Klassen ist, die auch zu unserem Vorteil verwendet werden kann,
obwohl wir sie später speziell in der Übung sehen möchten,
aber wir werden sie zu einem späteren Zeitpunkt wieder verwenden.
Und wir haben auch eine FormArray-Klasse, mit der Sie
ein numerisch indiziertes Array von AbstractControl-Instanzen definieren können
, wieder, sowohl die AbstractControl als auch das FormArray, wir werden nicht explizit
in dieser speziellen Lektion untersuchen, aber wir werden sie später im Kurs sehen.
Ein weiterer interessanter Aspekt reaktiver Formulare
ist die Verfügbarkeit des FormBuilders.
Die FormBuilder-Klasse ermöglicht es, die Formulare in unserem TypeScript-Code zu erstellen und
dann in der Lage zu sein, sie mit diesen Template-Steuerelementen dort zu binden.
Um die Form Builder-Klasse zu verwenden, importieren Sie den Form Builder aus den eckigen
Formularen und dann dort, nachdem Sie den Formulargenerator verwenden können, um das Formular zu konstruieren,
wie wenn Sie verwenden und tun, was Ihre Formkonverter-Klassen und die
Formulargruppenklassen, wie wir in der vorherigen Folie gesehen haben, ist dieser Code ein Etwas aufwändiger.
Aber mit der FormBuilder-Klasse reduziert es die Wiederholungsinklitik von in Ihrem
Code und macht es viel kompakter zum Definieren von Schriftarten.
Wir werden die FormBuilder-Klasse als Ansatz zum
Erstellen von Formularen in der folgenden Übung verwenden, und
dieses Beispiel wird von der Übung abgeleitet, die Sie direkt nach dieser Vorlesung durchführen werden.
So hier können Sie sehen, dass wir ein Formular aufgebaut haben, als eine Gruppe dieser
Formular-Steuerelemente und jeder von ihnen hat einen bestimmten Namen und auch den Wert, den sie gegeben haben. Wenn Sie
das Formularmodell in unserem Typoskriptcode erstellen,
füllen Sie das Formularmodell nicht automatisch aus. Sie müssen ausschließlich
das Formularmodell ausfüllen, insbesondere wenn Sie die Daten in einem Datenmodell abrufen.
Dann muss das Datenmodell Ihrem Formularmodell zugeordnet werden,
um die Werte zu füllen. -Modell und das Datenmodell werden in reaktiven Formularen getrennt gehalten.
In den vorlagengesteuerten Formularen haben Sie gesehen, dass wir direkt versuchen, die
Datenobjekte aus der Vorlagendatei zu unserem abstrakten Code.
In diesem Fall werden das Formular und das Datenmodell getrennt gehalten, so
dass alle Änderungen, die Sie an den
DOM-Elementen in Ihrem Formular vornehmen, in das Formularmodell fließen und
Sie müssen die Formulardaten explizit zurück zu
diesem Datenmodell reflektieren, sogar über einen Dienst oder was auch immer Sie wählen,
so dass diese Trennung uns hilft, unseren Code viel besser zu entwerfen, wie wir später sehen werden.
Zwei Methoden stehen für uns zur Verfügung, um ein Formularmodell aus einem Datenmodell zu füllen.
Wir haben die setValue () -Methode, die es uns ermöglicht, jedes Formularsteuerelement
einem bestimmten Wert aus dem Datenmodell zuzuweisen, oder wir haben einen patchValue (), mit
dem Sie nur einige Steuerelemente innerhalb Ihres Formularmodells aktualisieren können.
Wenn Sie also das Datenmodell vom Backend, aus dem Datenmodell erhalten
haben, können Sie die Werte in Ihr Formularmodell patchen oder die Werte aus
Ihrem Datenmodell in Ihr Formularmodell zuordnen. Häufig erstellen wir das Datenmodell,
das die Struktur des Formulars angemessen genau widerspiegelt.
In der folgenden Übung würden Sie sehen, dass ich ein Datenmodell habe,
das auf einer Klasse basiert,
die sehr genau das Formularmodell widerspiegelt, das wir dort in unserem Beispiel verwenden.
Mit diesem schnellen Verständnis reaktiver Formen gehen wir nun zu der Übung,
in der wir eine reaktive Form innerhalb unserer eckigen Anwendung verdoppeln und auf
dem Weg einige der Terminologie und
auch einige der Ideen konsolidieren, die wir gerade in dieser Lektion erforscht haben.
( MUSIK)