Angular bietet zwei Verfahren für das Arbeiten mit HTML-Formularen an.
Reine Formsache
Webanwendungen auf Basis von JavaScript/TypeScript und HTML5 sind moderner denn je. Viele Unternehmen wählen nach eingehender Validierung der Technologien diese beiden, um ihre Oberfläche umzusetzen. In diesem Zusammenhang treffen die Verantwortlichen häufig auf das Web-Framework Angular. Es bietet eine komfortable Plattform zum Erstellen von einfachen Single-Page-Applikationen bis hin zum Umsetzen schwergewichtiger Geschäftsanwendungen, die komplexe Prozesse abbilden.
Dabei stehen sich die Ansätze von „Template-driven“ (vorlagenbasierten) und „Model-driven“ (modellbasierten) Anwendungen mit ihrer jeweiligen Art der Umsetzung und ihren Vor- und Nachteilen gegenüber, hier gezeigt unter Verwendung von Angular am Beispiel von Datenbindung und Validierung. Auch die Herausforderungen, die sich bei der Wahl eines Ansatzes stellen und wie diese zu bewältigen sind, kommen zu Wort.
1)Listing 1: Die Datei template-form.template.html für ein vorlagenbasiertes Formular
Warum Angular Forms?
Viele Anwendungen scheinen nur aus Formularen zu bestehen. Dabei muss jede Applikation die gleichen Probleme bewältigen: Sie muss Daten erst auswerten und danach speichern. Dabei reicht die Validierungslogik von einfachen Regeln, etwa dass ein Feld nicht leer sein darf, bis zu komplexen Geschäftsregeln, dass etwa Datenabfragen an das Backend gestellt werden müssen. In der HTML5-Spezifikation gibt es dafür das Constraint Validation API [1], mit dem Felder auf verschiedene Logik geprüft werden können.
Wer Angular verwendet, genießt den Vorteil, nicht nur ein, sondern sogar zwei Verfahren (und entsprechende Module) zum Verwalten von Formularen verwenden zu können: die Ansätze für vorlagenbasierte und modellbasierte Formulare.
Sie sind dafür ausgelegt, ein über Datenbindung verknüpftes Datenmodell zu validieren, und können im Fehlerfall Validierungsfehler anzeigen.
Template- oder Model-driven
Es ist sinnvoll, sich im Vorfeld für eine der beiden Varianten zu entscheiden, um die jeweilige Anwendung in dieser Hinsicht einheitlich und konsistent zu halten. Mit Blick auf den Lebenszyklus der Software ist dann die Lesbarkeit des erzeugten Codes gewährleistet und zu einem späteren Zeitpunkt kann sich ein Entwickler schnell in Aufbau und Logik einarbeiten. Dies begünstigt zugleich die Wartbarkeit, da durch die Wahl einer Variante bei Anpassungen Validierungslogik entweder im HTML- oder im TypeScript-Code zu finden ist.
Kurz gesagt wird die zum Formular gehörige…