Formulare

Formulare in Angular

• es gibt zwei verschiedene Ansätze: Template Driven und Reactive Forms
• Template Driven Forms sind simpler und werden nahezu ausschliesslich im HTML definiert
• Reactive oder Model Driven Forms sind zu Beginn komplexer, werden zu grossen Teilen im SourceCode definiert und sind viel mächtiger
• Wir beschränken uns für die Schulung auf Template Driven Forms.

Aufgaben von Formularen

• Controls / Inputs und Bindings
• Änderungen, Dirty State
• Input Validierungen
• Anzeige von Fehlern, Warnungen
• Absenden von eingegebenen Daten

Form Basics

• Forms sind innerhalb des HTML <form> tags
• Zugriff auf die Angular Form Properties sind mit einer Referenz Variable möglich
• mit formVariable.value kann man sich den Status des Forms zeigen lassen

                    
                        <form #pizzaForm="ngForm">
                            {{pizzaForm.value | json}}
                        </form>
                    
                

Form Submit

• ein Form wird abgeschickt, wenn man den Button des Typs submit klickt
• mit dem ngSubmit Event kann man steuern was dann passieren soll

                    
                        <form (ngSubmit)="machWas()">
                            <input type="text" class="form-control"
                               [(ngModel)]="pizza.name" name="pizzaName">
                            <button type="submit">Los!</button>
                        </form>
                    
                

Form Properties

• nützliche Properties zum Formular
• Hilfreich um Speichern zu erlauben, Meldungen anzuzeigen etc.

                    
                        
                        <p>Value: {{pizzaForm.value | json}}</p>
                        
                        <p>Invalid: {{pizzaForm.invalid}}</p>
                        <p>Valid: {{pizzaForm.valid}}</p>
                        
                        <p>Touched: {{pizzaForm.touched}}</p>
                        <p>Untouched: {{pizzaForm.untouched}}</p>
                        
                        <p>Pristine: {{pizzaForm.pristine}}</p>
                        <p>Dirty: {{pizzaForm.dirty}}</p>
                    
                

Form Bindings

• eine einfache Möglichkeit sind Two-Way Bindings mit [(ngModel)]
• Wichtig ist hierbei, dass man auf jeden Fall ein unique name Attribut vergibt

                    
                        <form (ngSubmit)="machWas()">
                            <input type="text" class="form-control"
                               [(ngModel)]="pizza.name" name="pizzaName">
                            <button type="submit">Los!</button>
                        </form>
                    
                

Aufgabe 11.1 - Forms

• Branch: 10_Routing_1
• Erstelle rechts neben der Tabelle eine Visitor Komponente
• die Komponente soll den aktuell selektierten Visitor in einem Formular anzeigen
• Beschränke dich auf Vorname und Nachname, sowie einen Submit und einen Delete Button
• Führe das Speichern und Löschen mit dem Service und der REST API aus

Aufgabe 11.1 - Mögliche Lösung

• Branch: 11_Forms_1
• Wenn ihr eure Änderungen verwerfen möchtet und direkt zur Lösung wollt: git reset --hard && git checkout 11_Forms_1

Aufgabe 11.2 - Country ComboBox

• Branch: 11_Forms_1
• Füge das Land dem Formular als ComboBox hinzu
• Du kannst alle Länder von der API holen: api/countries
• eine ComboBox besteht aus einem select mit einer Vielzahl von option Elementen darin

                    
                        <select [(ngModel)]="pizza.zutat"
                                name="zutat" #select>
                            <option *ngFor="let zutat of zutaten"
                                    [value]="zutat"
                                    [selected]="zutat === select.value">
                                {{zutat}}
                            </option>
                        <select>
                    
                

Aufgabe 11.2 - Mögliche Lösung

• Branch: 11_Forms_2
• Wenn ihr eure Änderungen verwerfen möchtet und direkt zur Lösung wollt: git reset --hard && git checkout 11_Forms_2

Form Validation

• ein wichtiger Punkt in Formularen ist die Validierung
• Um die User Experience zu verbessern, sollte man einfach Validierungen zusätzlich zum Backend auch direkt im Frontend implementieren
• Wichtige Validierungen sind vor allem bzgl. Mussfeldern, Feldlängen, Reguläre Ausdrücke, oder auch ganz eigene Validierungen

HTML5 Form Validation

• Angular interpretiert die HTML5 Validierung
• Im Standard gibt es eine Vielzahl von Validierungen
• Diese können durch eigene Validierungen ergänzt werden
• Zusätzlich gibt es noch die Input type Eingrenzungen:mail, color, date, range, file und viele weitere

                    
                        <input type="text" required minlength="2" maxlength="24">
                    
                

Aufgabe 11.3 - Form Validation

• Branch: 11_Forms_2
• Füge eine Mussfeld Validierung für Vorname, Nachname und Land hinzu
• Füge eine MaximalZeichen Validierung für Vorname und Nachname hinzu (16 Zeichen)
• Ist das Form nicht valid, soll der Submit Button disabled sein (Angular Form Properties ;-))

Aufgabe 11.3 - Mögliche Lösung

• Branch: 11_Forms_3
• Wenn ihr eure Änderungen verwerfen möchtet und direkt zur Lösung wollt: git reset --hard && git checkout 11_Forms_3