It’s #FrontendFriday – Tipps und Tricks zu Angular Reactive forms
In diesem #FrontendFriday geht es um Komponenten, die so ziemlich in jeder Webanwendung vorkommen: Formulare.
In Angular sind Formulare auf zwei verschiedene Arten implementiert – Template-Driven und Reactive forms.
Was ist der Unterschied zwischen Template-Driven und Reactive forms?
Jede der beiden Vorgehensweisen hat seine Vor- und Nachteile.
Hier ein kurzer Vergleich:
| Template-Driven | Reactive forms |
|
|
Die meisten Entwickler neigen dazu, Formulare mit der Template-Driven Variante umzusetzen. Wächst ein Formular über die Zeit in seiner Größe und Komplexität, dann bietet es sich an, bereits zu Beginn die Reactive forms Variante zu wählen. Es werden bereits viele build-in Funktionalitäten mitgeliefert, die in der Template-Driven Variante selbst implementieren werden müssen. Beispiele die regelmäßig bei Formularen im Einsatz, aber aus der Doku nicht ganz ersichtlich sind.
Tipps und Tricks zu Reactive form
Beim Erstellen eines Reactive form Objekts werden bereits für jedes Eingabefeld entsprechende Validatoren mit angegeben.
this.signupForm = this.fb.group({
firstName: ['', [Validators.required, Validators.maxLength(15)]],
email: ['', [Validators.required, Validators.email]],
});
`Validators.required` gibt an, dass dieses Feld ein Pflichtfeld ist. Über `Validators.maxLength(15)` sind nur maximal 15 Zeichen in diesem Feld erlaubt. Mit `Validators.email` wird festgelegt, dass es sich bei diesem Feld um ein E-Mail-Adress-Feld handelt. Dabei wird geprüft, ob der eingegebene Text eine valide E-Mail Adresse ist. Es können aber auch eigene Validatoren geschrieben und verwendet werden.
Soll ein eingegebenes Formular abgeschickt werden, bietet es sich an, alle Eingabefelder zu deaktivieren. Somit werden während dem Absenden keine weiteren Eingaben gemacht. In der Template Drive Variante müsste hier jedes Feld einzeln deaktiviert werden. Reactive forms bietet hier eine simple Möglichkeit, eine ganze Gruppe zu aktivieren/deaktivieren.
this.signupForm.disable(); this.signupForm.enable();
Nachdem ein Formular abgeschickt wird, ist oft gewünscht, dass das ausgefüllte Formular wieder leer ist. Über die Template-Driven Variante werden alle Two-way Databinding Variablen überschrieben. Reactive form bietet auch hier eine simple Möglichkeit an, eine ganze Formulargruppe zu bereinigen.
this.signupForm.reset();
Hier noch ein kleines Hands-On bei dem die oben genannten Beispiele zum Einsatz kommen:
Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.
Mehr über Fronted Entwicklung erfahren
Hallo Matthias,
danke für dein Feedback. In einem praktischen Beispiel lässt sich das vermutlich am Besten veranschaulichen.
Leider würde so ein Beispiel den Aufwandsrahmen für einen FrontendFriday sprengen.
Wir werden das Interesse an diesem Thema jedoch vermerken und ggf. das Ganze in anderer Form umsetzen.
Viele Grüße
Werner
Hallo Werner,
danke für den Artikel. Mich würde noch interessieren, wie „Kein Data Binding (unveränderbares Datenmodel)“ in der Praxis genau aussieht. Ist für mich so noch etwas abstrakt.
Gibt es hier Fallstricke, die man vermeiden sollte etc.
Wie befüllt man hier Formulare nach Best Practice aus einem HTTP-Request an ein Backend? Cool fände ich einen weiteren Artikel, der beide Ansätze anhand einer Mini-Anwendung vergleicht (also auf beide Arten implementiert), so dass man die genauen technischen Unterschiede besser verstehen kann.
Viele Grüße
Matthias