Wie man Reactive Forms in Angular verwendet
Inhaltsverzeichnis
Angular ist ein Framework und eine Plattform zur Anwendungsentwicklung, die in JavaScript arbeitet. Angular Entwickler verwenden Angular für die Erstellung effizienter, skalierbarer Webanwendungen und Apps verwendet. Die Funktionen von Angular sind sowohl für die Erstellung von Einzelentwickler- als auch von Unternehmensanwendungen nützlich. Angular arbeitet in JavaScript, HTML und TypeScript (eine strenge syntaktische Obermenge von JavaScript).
Angular hat mehrere Vorteile gegenüber anderen Plattformen, wie z. B. eine komponentenbasierte Architektur, die zu einer höheren Code-Qualität führt. Weitere Vorteile sind eine plattformunabhängige Philosophie oder einfach ein „Mobile-First-Ansatz“ und hohe Performance. Es ist ein einfallsreiches Ökosystem und hat eine höhere Glaubwürdigkeit aufgrund der langfristigen Unterstützung durch Google.
Aber die Frage ist jetzt, wozu brauchen Anwendungsentwicklungs-Frameworks wie Angular Formulare? Formulare, die in Anwendungen verwendet werden, ermöglichen es ihren Benutzern, verschiedene Aufgaben zur Dateneingabe auszuführen. Diese Aufgaben reichen von der Anmeldung über die Aktualisierung eines Profils bis hin zur Eingabe sensibler Informationen. Die professionelle Angular Entwickler sagen, dass die Verwendung von Formularen zur Verarbeitung von Benutzereingaben für viele Anwendungen von zentraler Bedeutung ist.
Übersicht der reaktiven Formulare
Dieser Abschnitt bietet einen grundlegenden Überblick über reactive forms im Angular-Framework. Reactive forms in Angular bieten einen modellgesteuerten Ansatz zur Handhabung von Formulareingaben, deren Werte sich zeitlich ändern. Der Zustand eines Formulars zu einem bestimmten Zeitpunkt wird von reaktiven Formularen mit einem festen oder unflexiblen Ansatz verwaltet. Dies impliziert, dass jede Änderung des Zustands eines Formulars einen neuen Zustand zurückgibt.
Dieser explizite Ansatz erhält die Integrität des Formularzustands zwischen den Änderungen aufrecht. Die Angular Entwickler können mit reaktiven Formularen einfach testen, da die beteiligten Daten konsistent und vorhersehbar sind. Außerdem haben die Benutzer, die auf diese Daten zugreifen, die Erlaubnis, die Daten sicher zu manipulieren. Aber Moment, haben Sie sich schon einmal gefragt, warum sie reactive forms genannt werden?
Das liegt daran, dass das Formular selbst und jedes einzelne Formularsteuerelement eine Observable-basierte API bereitstellen, eine sehr wichtige Eigenschaft reaktiver Formulare. Sie arbeiten mit „Observable Streams“, das heißt, Formulareingaben erfolgen in Form von kontinuierlichen Strömen von Eingabewerten. Diese Ströme haben den Vorteil, dass auf sie synchron zugegriffen werden kann und sie mit gängigen RxJs-Operatoren verarbeitet werden können.
Sie möchten die Theorie vertiefen und mit Hilfe eines Angular-Formularbeispiels verstehen? Hier ist ein cooles Youtube Video-Tutorial mit einem Angular reactive form Beispiel!
Zu den beliebten Vorteilen von reaktiven Formularen gehören ein weniger unübersichtliches Template, eine bessere Skalierbarkeit und die Verwendung von benutzerdefinierten Validatoren bei der Validierung von Angular reaktiven Formularen. Diese und weitere Vorteile werden wir im weiteren Verlauf des Artikels im Detail besprechen.
Interessante Projekte
Zuverlässige Arbeitgeber
Faire Vergütung
Warum wir reactive forms in Angular verwenden
Reactive forms gelten im Vergleich zu Angular Template-getriebenen Formularen als leistungsfähiger. Dies liegt an mehreren Gründen, einige davon sind:
Unveränderlichkeit
Unveränderlichkeit ist die Eigenschaft, nicht „mutieren“ oder sich verändern zu können. Eine Mutation ist genau das, wovor reactive forms den Formularzustand schützen, indem sie eine unveränderliche oder feste Datenstruktur bereitstellen. Bei jeder Änderung des Datenmodells geben die beobachtbaren Operatoren ein neues Datenmodell zurück. Dadurch bleibt die Integrität des Datenmodells zwischen den Änderungen erhalten. Dieser unveränderliche Ansatz zur Verwaltung des Formularstatus hilft, das Datenmodell rein zu halten.
Vorhersagbarkeit
Wie bereits in der Übersicht über Formulare erläutert, sind reactive forms um beobachtbare Datenströme herum aufgebaut. Dies hilft, auf Eingabewerte synchron zuzugreifen. Eine weitere wichtige Rolle von Observable Streams ist, dass sie Änderungen im Formular verfolgen. All dies macht reactive forms sehr vorhersehbar. Die Vorhersagbarkeit wiederum macht das Testen einfacher.
Strukturierter Datenfluss
In reaktiven Formularen ist der Datenfluss strukturiert, da reactive forms von der Komponentenklasse angeführt werden. Dadurch haben sie nach der Erstellung der Verknüpfung mit der FormControlDirective direkten Zugriff auf die FormControl-Instanz. Jede Vorlage ist mit dem FormControl verknüpft. Wenn also eine Änderung eintritt und eine Aktualisierung der Ansicht erforderlich ist, wird das DOM nicht neu gerendert.
Skalierbarkeit
Die Skalierbarkeit ist ein großes Plus, wenn es um die Vorteile von reaktiven Formularen in Angular geht, so die Angular Entwickler. Reactive forms sind synchron und diese Eigenschaft macht die Skalierung einfacher. Dies erhöht auch ihre Wiederverwendbarkeit und somit können sie bequem bei großen Formularen eingesetzt werden.
Prüfung
Eine bessere Testbarkeit ist eine weitere erfreuliche Folge des synchronen Zugriffs in reaktiven Formularen. Der synchrone Zugriff sowohl auf das Formular als auch auf die Datenmodelle hilft, Angular-Apps vor der Produktion einfach zu testen. Das liegt daran, dass reactive forms das Testen ohne Rendering der UI ermöglichen.
Formulartypen in Angular
Formulare in Angular werden verwendet, um Benutzereingabeereignisse von der Ansicht zu sammeln und die Eingabe des Benutzers zu validieren. Sie werden auch verwendet, um ein Formularmodell und ein Datenmodell zu erstellen, das aktualisiert wird und hilft, Änderungen im Formular zu verfolgen. Für die Verarbeitung von Benutzereingaben gibt es in Angular zwei verschiedene Typen von Formularen: Angular reactive forms und Angular template-gesteuertes Formular. Dieser Artikel enthält Informationen von erfahrenen Angular Entiwcklern über Angular reactive forms im Detail.
Angular reactive forms
Das Hauptmerkmal der reaktiven Formulare in Angular ist der direkte, explizite Zugriff auf das zugrunde liegende Formularobjektmodell. In der Übersicht über reactive forms haben wir kurz die Eigenschaften reaktiver Formulare wie größere Skalierbarkeit, Wiederverwendbarkeit und Testbarkeit angesprochen. Diese Eigenschaften von reaktiven Formularen bieten einen Vorteil gegenüber Template-getriebenen Formularen.
Hier ist eine API-Zusammenfassung für Angular reactive forms , wenn Sie Ihr erstes Angular reaktives Formularbeispiel bauen.
Angular Template-gesteuertes Formular
Template-getriebene Formulare verwenden Template-Direktiven, um das zugrunde liegende Objektmodell zu erstellen und zu manipulieren. Ihre Skalierbarkeit und Wiederverwendbarkeit ist jedoch nicht so gut wie bei reaktiven Formularen. Der Hauptvorteil von vorlagengesteuerten Formularen ist daher ihre anfängliche Einfachheit. Dies ist nützlich für die Erstellung kleiner bis mittelgroßer Formulare.
Diese Ansätze unterscheiden sich in vielen Aspekten und haben ihre eigenen Vor- und Nachteile. Welchen Ansatz Sie wählen sollten, hängt von der Art der Anwendung ab, die Sie erstellen. Wenn Ihre Anwendung zum Beispiel eine signifikante Verwendung von Formularen hat, dann entscheiden Sie sich für Angular reactive forms . Wenn die Formularanforderungen Ihrer Anwendung jedoch einfach sind, sind vorlagengesteuerte Formulare die beste Wahl.
Unterschied zwischen Template-gesteuerten und reaktiven Formularen in Angular
In diesem Abschnitt werden die wichtigsten Unterschiede zwischen vorlagengesteuerten und reaktiven Formularen in Angular erläutert. Sie unterscheiden sich in den folgenden Faktoren:
- Aufbau des Formularmodells;
- Datenmodell;
- Testen;
- Datenfluss;
- Formular-Validierung;
Aufbau des Formularmodells
In einem reaktiven Angular-Formular wird das Formularmodell direkt in der Komponentenklasse definiert. Die FormControl-Instanz wird explizit erzeugt und mit einem bestimmten Formularelement in der Ansicht verknüpft. Dies geschieht über die Direktive [formControl] unter Verwendung eines internen Wertebeschleunigers. Das Formularmodell ist die Quelle der Wahrheit.
Im Vergleich dazu ist das Formularmodell in vorlagengesteuerten Formularen implizit. Die FormControl-Instanz wird hier von der Ngmodel-Direktive für ein bestimmtes Formularelement erstellt und verwaltet. Die Vorlage ist die Quelle der Wahrheit.
Datenmodell
Das Datenmodell wird in Angular reaktiven Formularen aufgrund der unveränderlichen Datenstruktur rein gehalten. Die Erkennung von Änderungen ist effizienter, da nur eindeutige Änderungen aktualisiert werden müssen. Diese Datenaktualisierungen sind in einem reaktiven Muster, daher kann man mit beobachtbaren Operatoren für die Datenübertragung integrieren.
Schablonengesteuerte Formulare verwenden ein Zwei-Wege-Bindungssystem, um Änderungen an der Schablone auf dem Datenmodell zu aktualisieren. Durch die Verwendung der Zwei-Wege-Bindung entfällt die Verfolgung eindeutiger Änderungen, wodurch die Erkennung von Änderungen weniger effizient ist.
Testen
Wie bereits in früheren Abschnitten erwähnt, können die Angular Entwickler die Angular reaktiven Formularen besser testen. Der Grund ist wiederum, dass der Zugriff auf das Formular und das Datenmodell in einem Angular reaktiven Formular synchron ist. Somit kann das Testen ohne UI-Rendering durchgeführt werden.
Bei Template-gesteuerten Formularen muss man sich mit den Prozessen der Änderungserkennung auskennen und verstehen, wie die Direktiven in einem Zyklus ablaufen. Nur dann kann man sicherstellen, dass die Elemente einwandfrei abgefragt, getestet und geändert werden.
Datenfluss
Jedes Formularelement in der Ansicht ist direkt mit dem Formularmodell in einem reaktiven Angular-Formular verknüpft. Updates in und aus der Ansicht und dem Modell sind synchron und damit unabhängig vom UI-Rendering.
Im Gegensatz dazu ist in Template-gesteuerten Formularen jedes Formularelement in der Ansicht mit einer Direktive verknüpft. Diese Direktive verwaltet dann intern das Formularmodell.
Formular-Validierung
Die Validierung von Angular-Reactive-Formularen wird mit Hilfe von Funktionen durchgeführt. Diese Funktionen werden als die benutzerdefinierten Validatoren definiert und erhalten das Steuerelement zur Validierung.
Im Vergleich zur Angular reaktiven Formularen Validierung ist die Validierung in Template-getriebenen Formularen an Template-Direktiven gebunden.
Vertiefende Informationen zur Validierung in einem Angular reaktiven Formular sind nur einen Klick entfernt!
Wie man reactive forms in Angular verwendet
Dieser Abschnitt ist ein kurzes Schritt-für-Schritt-Tutorial zu Angular Forms, in dem erklärt wird, wie man Angular reactive forms in einer Anwendung einsetzt. Bevor Sie jedoch mit diesem Angular Formular-Tutorial fortfahren und Angular reactive forms verwenden, müssen Sie Node.js installieren und eine lokale Entwicklungsumgebung erstellen.
Schritt 1 – Einrichten des Projekts
Für dieses Angular Formular-Tutorial müssen Sie von einem Standard-Angular-Projekt ausgehen, das mit @angular/cli generiert wurde. Setzen Sie die Stile des Projekts auf CSS und fügen Sie das ReactiveFormsModule im Code-Editor hinzu.
Schritt 2 – Hinzufügen eines Formulars zur Komponentenvorlage
Die Logik wird bei reaktiven Formularen vollständig in der Komponentenklasse deklariert. Daher müssen Sie nach Schritt 2 des Angular Formular-Tutorials ein Angular-Projekt mit einem Komponenten-Template mit einem Formular bereit haben.
Schritt 3 – Erstellen der Komponentenklasse
In diesem Schritt müssen Sie in der Komponentenklasse die FormGroup und darin die einzelnen FormControls definieren. Der Wert, der beim „Neuanlegen“ eines FormControls angegeben wird (wenn überhaupt), dient als Initialwert für das jeweilige Feld.
Schritt 4 – Aktualisieren der Komponentenklasse zur Verwendung des FormBuilders
Für diesen Schritt müssen Sie erneut die app.component.ts im Code-Editor aufrufen und FormControl entfernen. Anschließend ersetzen Sie FormGroup durch FormBuilder. Der Zweck dieses Schrittes ist es, das gesamte „Newing“ der FormGroup und des FormControls zu entfernen.
Schritt 5 – Aktualisieren der Komponentenklasse zur Verwendung von Validatoren
Gehen Sie im Code-Editor erneut zu app.component.ts und fügen Sie Validatoren hinzu. In diesem Schritt des Angular-Formular-Tutorials fügen Sie die Klasse Validators zu Ihren Importen hinzu und verwenden Arrays und nicht einfache String-Werte zur Deklaration Ihres Formular-Steuerelements.
Schritt 6 – Zugriff auf Formularwert und Gültigkeit in der Vorlage
Auf den Wert und die Gültigkeit der einzelnen FormControls sowie auf den Wert und die Gültigkeit der gesamten Formulargruppe kann im Template zugegriffen werden. Für diesen Schritt müssen Sie die app.component.html erneut aufrufen und *ngIf verwenden. Falls die Formularwerte nicht gültig sind, werden dem Benutzer Rückmeldungen angezeigt.
Jetzt, da Sie wissen, wie Sie ein Angular-Beispiel für ein reaktives Formular anwenden können, machen Sie sich bereit und bauen Sie Ihre erste App mit dem Ignite UI for Angular CLI!
Integration von reaktiven Formularen
Integrationen in reaktiven Formularen ermöglichen es den Angular Entwicklern, dass unabhängig entwickelte Anwendungen mit den reaktiven Formularen zusammenarbeiten. Dadurch wird die Funktionalität von Angular-Formularen erhöht. Die Entwickler von Infragistics haben Angular-Komponenten erstellt, von denen andere Entwickler, die Angular verwenden, profitieren. Diese Integrationen folgen einem modellgesteuerten Ansatz für Formulare, der den Umgang mit Formulareingaben erleichtert.
Einer der größten Pluspunkte bei der Verwendung einer reaktiven Formularintegration ist die Leistungsoptimierung. Gut durchdachte Integrationen erleichtern es den Entwicklern, in kürzerer Zeit und mit mehr Effizienz durch verschiedene Formularkomponenten zu manövrieren. Darüber hinaus bietet der Komponentenentwicklungsprozess bei Infragistics vollständige Transparenz auf Github. So können Entwickler Ideen und Probleme austauschen, den Fortschritt verfolgen und vieles mehr nur auf Github.
Infragistics stellt auch sicher, dass Sie als Entwickler, der Angular verwendet, keine Komponenten von Drittanbietern installieren müssen, die nicht nativ zu Angular gehören. Flexibilität erhalten Sie auch durch die vollständige Unterstützung bei der Lokalisierung und Globalisierung. Entwickler aus jeder Region oder jedem Gebietsschema können ohne Probleme auf diese Angular-Komponenten zugreifen.
Zusammenfassung
Reactive forms sind ein wesentlicher Bestandteil jeder gut gestalteten App. Die Integration reaktiver Formulare in Ignite UI für Angular hilft Ihnen, benutzerfreundliche Web-Apps zu erstellen. Optimieren Sie Ihren Web-App-Entwicklungsprozess mit mehr als 70 Angular-Komponenten, schnellen Datenrastern und professionellen Funktionen, die eine reibungslose Benutzererfahrung ermöglichen.
