Angular Dynamic Forms - Das Chamäleon unter den Formularen

Während des Entwicklungsprozesses von Webanwendungen ändern sich die Daten und Datenmodelle für Eingabeformulare kontinuierlich. Häufige Anpassungen im Frontend sind die Folge, was wertvolle Zeit und damit auch Geld kostet. Ziel muss es daher sein, dass sich eine Webanwendung selbst an die zur Verfügung stehenden Informationen anpasst. Mit den Dynamic Forms von Angular bleiben Eingabemasken anpassungsfähig. Auf neue Anforderungen kann binnen kürzester Zeit reagiert werde. Durch wiederverwendbare, generische Eingabefelder wird ein hohes Maß an Flexibilität geschaffen. Ziel dieses Talks ist es, das volle Potenzial der Dynamic Forms zu präsentieren. Dank eines kompakten Einstiegs in die Formularverarbeitung mit Angular können auch Einsteiger problemlos folgen. Im Anschluss wird der Einsatz von Dynamic Forms die hohe Modularisierung des Ansatzes demonstriert. Dazu wird gezeigt, wie man zur Laufzeit Validierungsregeln von einer API lädt und im Formular nutzt.

Transcript

1. co-IT.eu GmbH We Empower Outstanding Business Solutions Angular Dynamic Forms - Das Chamäleon unter den Formularen @FrankStrieter https://github.com/Strulle/dwx-dynamic-forms
3. AGENDA Was ist unser Ziel? 1. Reduzierung von Codeduplizierungen in Formularen 2. Einheitliches Datenmodell für Formulare schaffen 3. Reduzierung des Aufwands bei Änderungen der Anforderungen
4. Formulare in Angular Die Möglichkeiten des Frameworks 1. Referenzvariablen 2. Template Driven Forms 3. Reactive Forms <form #form> <input type="text" name="firstname" required> <button (click)="submit(form)"></button> </form>
5. Template Driven Forms Funktionsweise 1. HTML-Controls referenzieren eine Variable in der Komponente 2. Nutzen Angulars Direktive ‚ngModel‘ für • Change Detection • Validierung • Statusinformationen <form #form="ngForm"> <mat-form-field> <input matInput placeholder="Vorname" name="firstname" required [(ngModel)]="user.firstname"> </mat-form-field> </form>
6. Template Driven Forms Was ist das Problem? Änderung der Anforderung Ticket für Frontend Entwickler Ticket für Backend Entwickler Anpassungen Fronend Anpassungen Backend 1. Hoher Anpassungsaufwand 2. Keine Skalierbarkeit 3. Codeduplizierung
7. Reactive Forms Auf dem Weg zur Lösung: Reactive Forms 1. Separierung von Formularlogik und Template 2. Formular bildet automatisch das Datenmodell ab 3. Möglichkeit zum Hinzufügen/Entfernen von • Formularelementen • Synchronen, asynchronen und eigenen Validatoren • Optionen (z.B. disabled) FormGroup FormArray FormControl
8. Reactive Forms Auf dem Weg zur Lösung: Reactive Forms this.form = new FormGroup({ firstname: new FormControl( this.user.firstname, Validators.required), lastname: new FormControl( this.user.lastname, Validators.required), }); <mat-form-field> <input matInput placeholder="Vorname" formControlName="firstname"> <mat-error *ngIf="form.get('firstname').hasError('required')"> Erforderliches Feld </mat-error> </mat-form-field>
9. Reactive Forms Auf dem Weg zur Lösung: Reactive Forms this.form = new FormGroup({}); for (let key in this.user) { this.form.addControl( key, new FormControl(this.user[key]) ); } <mat-form-field *ngFor="let property of user | objectToArrayPipe"> <input matInput placeholder="?" [formControlName]="property"> </mat-form-field>
10. Dynamic Forms Weitere 3 Schritte zur Lösung 1. Abstrahierung des Datenmodels 2. Mapping des Datenmodells auf das Template 3. Pflege des Datenmodels
11. Reactive Forms Auf dem Weg zur Lösung: Das Datenmodell key: Control { type: string, // input | select | radiogroup | checkbox | group | array name: string, value: string | number | boolean | Option | Option[], placeholder: string, label: string, validators: { type: string, args: string }[], inputtype?: string, options?: { key: string, value: string } [], items?: Control[], {key: Control} }
12. Reactive Forms Auf dem Weg zur Lösung: Formgenerierung export function initializeControls(): ControlFn { return { input: (control: ApiInputControl) => createInputControl(control), select: (control: ApiSelectControl) => createSelectControl(control), }; } function createInputControl(control: ApiInputControl): FormControl { return new CustomInput(control).getControl(); }
13. Dynamic Forms Der Anpassungsaufwand reduziert sich Änderung der Anforderung Ticket für Frontend Entwickler Ticket für Backend Entwickler Anpassungen Fronend Anpassungen Backend 1. Formularmodell wird durch einen Webservice bereitgestellt 2. Formularmodell kann durch den Nutzer verändert werden
15. Ausblick Welche Möglichkeiten bestehen noch? 1. Daten oder Formularteile nachladen für z.B. Select-Boxen 2. Definieren einer URL, an welche der Request gesendet werden soll 3. Bedingungen an Formularelemente setzen 4. Eigene (bereits übersetzte) Fehlernachrichten hinterlegen 5. Austauschbarkeit der Formkomponenten gewährleisten
17. co-IT.eu GmbH We Empower Outstanding Business Solutions Danke @FrankStrieter https://github.com/Strulle