33 VIEWS

It’s #FrontendFriday – Tipps und Tricks zu Angular Reactive forms

24.09.2021

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
  • Einfache Umsetzung
  • Geeignet für simple Formulare
  • Two-way Data Binding
  • Mehr HTML Code / weniger Typescript Code
  • Unit testing ist aufwendiger
  • Flexibler aber benötigt mehr Erfahrung
  • Geeignet für komplexe Formulare
  • Kein Data Binding (unveränderbares Datenmodel)
  • Mehr Typescript Code / weniger HTML Code
  • Viele build-in Formularfunktionen
  • Dynamisches Hinzufügen von Elementen
  • Unit testing ist einfacher

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.

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.

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.

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.

Inhalt laden

Zurück zur Übersicht

2 Kommentare zu “It’s #FrontendFriday – Tipps und Tricks zu Angular Reactive forms

  1. 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

  2. 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

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*