© Excellent backgrounds/Shutterstock.com
Java Magazin
Typisierte Formulare in @angular/forms

Erleichterung im Entwickleralltag


Angular kommt als „Batteries included“ Framework daher und bietet Funktionen und Vorgehensweisen für so ziemlich alles, was man in einer SPA benötigt. Hierzu gehört auch die Eingabe von Nutzern in komplexen Formularen. Wir zeigen, wie die Entwicklung mit Reactive Forms verbessert und vereinfacht werden kann.

Angular gehört neben React und Vue zu den bekanntesten Frameworks [1]. Zusätzlich ist Angular das erste große Framework, das von Anfang an Wert auf statische Typisierung des Quellcodes gelegt hat. Angular selbst wurde komplett in TypeScript entwickelt, und auch in eigenen Projekten wird der Einsatz von TypeScript vorausgesetzt.

Type check all the things!

Typisierung hat nach dem initialen Aufwand mehrere Vorteile bei der Arbeit. Dazu gehören unter anderem die Dokumentation des Codes, IDE-Unterstützung durch Codevervollständigung und Refactoring sowie Fehlermeldungen bereits beim Schreiben des Codes und nicht erst bei Unit-Tests oder während der Laufzeit. Die Vorteile wiegen umso stärker, wenn in einem großen Team oder komplexeren Projekten gearbeitet wird.

Bei der Verwendung von Formularen aus dem Paket @angular/forms gehen diese komplett verloren, und es wird dort mit dem Wildcardtyp any gearbeitet. Das ist damit zu erklären, dass TypeScript beim Entwurf von Angular 2 weit weniger mächtig war als heute und keinen Zugriff auf Typen komplexer generischer Parameter unterstützt hat. So wurden Funktionen, die für das Arbeiten mit verschachtelten komplexen Typen eine Voraussetzung sind – wie etwa das keyof-Keyword mit TypeScript 2.1 und Conditional Types –, erst mit TypeScript 2.8. Default Generics für die abwärtskompatible Weiterentwicklung mit TypeScript 2.3 eingeführt.

TypeScript 2.1 wurde vor über zwei Jahren veröffentlicht, und in aktuellen Angular-Projekten wird bereits TypeScript 3.5 verwendet. Wie sieht es aktuell mit typisierten Formularen aus? Es existieren etliche Bugtickets, Feature Proposals und Pull Requests zu dem Thema, die auch knapp drei Jahre zur...

Java Magazin
Typisierte Formulare in @angular/forms

Erleichterung im Entwickleralltag

Angular kommt als „Batteries included“ Framework daher und bietet Funktionen und Vorgehensweisen für so ziemlich alles, was man in einer SPA benötigt. Hierzu gehört auch die Eingabe von Nutzern in komplexen Formularen. Wir zeigen, wie die Entwicklung mit Reactive Forms verbessert und vereinfacht werden kann.

Christoph Hoffmann


Angular kommt als „Batteries included“ Framework daher und bietet Funktionen und Vorgehensweisen für so ziemlich alles, was man in einer SPA benötigt. Hierzu gehört auch die Eingabe von Nutzern in komplexen Formularen. Wir zeigen, wie die Entwicklung mit Reactive Forms verbessert und vereinfacht werden kann.

Angular gehört neben React und Vue zu den bekanntesten Frameworks [1]. Zusätzlich ist Angular das erste große Framework, das von Anfang an Wert auf statische Typisierung des Quellcodes gelegt hat. Angular selbst wurde komplett in TypeScript entwickelt, und auch in eigenen Projekten wird der Einsatz von TypeScript vorausgesetzt.

Type check all the things!

Typisierung hat nach dem initialen Aufwand mehrere Vorteile bei der Arbeit. Dazu gehören unter anderem die Dokumentation des Codes, IDE-Unterstützung durch Codevervollständigung und Refactoring sowie Fehlermeldungen bereits beim Schreiben des Codes und nicht erst bei Unit-Tests oder während der Laufzeit. Die Vorteile wiegen umso stärker, wenn in einem großen Team oder komplexeren Projekten gearbeitet wird.

Bei der Verwendung von Formularen aus dem Paket @angular/forms gehen diese komplett verloren, und es wird dort mit dem Wildcardtyp any gearbeitet. Das ist damit zu erklären, dass TypeScript beim Entwurf von Angular 2 weit weniger mächtig war als heute und keinen Zugriff auf Typen komplexer generischer Parameter unterstützt hat. So wurden Funktionen, die für das Arbeiten mit verschachtelten komplexen Typen eine Voraussetzung sind – wie etwa das keyof-Keyword mit TypeScript 2.1 und Conditional Types –, erst mit TypeScript 2.8. Default Generics für die abwärtskompatible Weiterentwicklung mit TypeScript 2.3 eingeführt.

TypeScript 2.1 wurde vor über zwei Jahren veröffentlicht, und in aktuellen Angular-Projekten wird bereits TypeScript 3.5 verwendet. Wie sieht es aktuell mit typisierten Formularen aus? Es existieren etliche Bugtickets, Feature Proposals und Pull Requests zu dem Thema, die auch knapp drei Jahre zur...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang