Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Formulare in Angular – Varianten, Konzepte und Umsetzung

Formulare in Angular – Varianten, Konzepte und Umsetzung

Formulare bilden die Grundlage vieler Line-of-Business Applikationen, besonders im Web. Seit Angular 2 gibt es neben dem Konzept der Template-Driven Forms auch das Konzept der Reactive-Forms. In dieser Session lernen Sie Schritt für Schritt wie mit den beiden Varianten Formulare aufgebaut, validiert und abgeschickt werden. Die beiden Varianten werden im Detail erläutert, verglichen und wir finden heraus, für welche Anwendungsfälle welche Technologie Vorteile bietet.

Thomas Gassmann

October 17, 2018
Tweet

More Decks by Thomas Gassmann

Other Decks in Programming

Transcript

  1. Formulare in Angular
    Web Developer Conference 17.10.2018
    Thomas Gassmann @gassmannT

    View full-size slide

  2. Thomas Gassmann
    Senior Consultant,
    Trainer, Speaker
    thomasgassmann.net
    @gassmannT
    17.10.2018 WDC - Formulare in Angular
    2

    View full-size slide

  3. Agenda
    17.10.2018 WDC - Formulare in Angular
    3
    ▪ Introduction
    ▪ Template-Driven Forms
    ▪ Reactive Forms
    ▪ Custom Controls

    View full-size slide

  4. Angular Forms
    17.10.2018 WDC - Formulare in Angular
    4

    View full-size slide

  5. Form technologies
    17.10.2018 WDC - Formulare in Angular
    5
    Template-driven Forms
    ▪ Use a Component’s
    Template
    ▪ Unit Test against DOM
    Reactive Forms
    ▪ Use a Component’s
    Template
    ▪ Create a Form Model in
    TypeScript
    ▪ Unit Test against Form
    Model
    ▪ Validation in Form Model

    View full-size slide

  6. Building Blocks: State
    17.10.2018 WDC - Formulare in Angular
    6
    Value Changed:
    pristine
    dirty
    Validity:
    valid
    invalid
    Visited:
    touched
    untouched

    View full-size slide

  7. Building Blocks
    17.10.2018 WDC - Formulare in Angular
    7
    FormControl
    Tracks state of an
    individual input
    FormGroup
    Tracks state of a group
    of FormControls

    View full-size slide

  8. Form Model
    17.10.2018 WDC - Formulare in Angular
    8
    ▪ Instances of FormControl or FormGroup
    ▪ Retains form state
    ▪ Retains form value
    ▪ Retains child controls (FormControls or FormGroups)

    View full-size slide

  9. Template-Driven Forms
    17.10.2018 WDC - Formulare in Angular
    9
    ▪ Kind of forms used with Angular 1.x
    ▪ Bind directives and behavious to your templates
    ▪ Used with ngModel, required, minlength etc.
    ▪ The template is doing the work
    ▪ Angular automatically generates our FormModel

    View full-size slide

  10. Reactive Forms
    17.10.2018 WDC - Formulare in Angular
    10
    ▪ Also known as model-driven
    ▪ Avoiding directives such as ngModel, required etc.
    ▪ Use the underlying APIs to do the work by creating a
    instance inside a component class and construct
    JavaScript models.
    ▪ Very testable
    ▪ Keeps all logic in the same place

    View full-size slide

  11. Directives: Template-Driven
    17.10.2018 WDC - Formulare in Angular
    11

    [(ngModel)]="employee.firstname">

    ▪ ngForm
    ▪ ngModel
    ▪ ngModelGroup

    View full-size slide

  12. Directives: Reactive Forms
    17.10.2018 WDC - Formulare in Angular
    12

    formControlName="firstname">

    ▪ formGroup
    ▪ formControl
    ▪ formControlName
    ▪ formGroupName

    View full-size slide

  13. Starting Position
    17.10.2018 WDC - Formulare in Angular
    13


    Firstname



    Lastname



    Email



    Confirm Email


    Save

    View full-size slide

  14. Template Driven Forms
    17.10.2018 WDC - Formulare in Angular
    14

    View full-size slide

  15. Template-Driven Forms
    17.10.2018 WDC - Formulare in Angular
    15
    import { FormsModule } from '@angular/forms’;
    @NgModule({
    imports: [ BrowserModule, FormsModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
    })
    export class AppModule { }
    ▪ Add the FormsModule to your AppModule to use
    ngModel

    View full-size slide

  16. Template-Driven Forms
    17.10.2018 WDC - Formulare in Angular
    16
    @Component({...
    templateUrl: 'employee-form.component.html'
    })
    export class EmployeeFormComponent {
    employee:Employee = {firstname: 'Thomas',
    lastname: 'Gassmann',
    email: '[email protected]'};
    }
    ▪ Declare our model class

    View full-size slide

  17. Template-Driven Forms
    17.10.2018 WDC - Formulare in Angular
    17


    Firstname
    name="firstname"
    [(ngModel)]="employee.firstname"
    class="form-control">


    ▪ Binding ngForm and ngModel

    View full-size slide

  18. Template-Driven Forms
    17.10.2018 WDC - Formulare in Angular
    18



    ▪ Add submit functionality by adding the ngSubmit
    export class AppComponent {
    employee:Employee= {…};
    onSubmit({ valid }: { valid: boolean }) {
    console.log(valid)
    }
    }

    View full-size slide

  19. Template-Driven Forms: Error Validation
    17.10.2018 WDC - Formulare in Angular
    19
    ▪ Disabling our submit button until the form is valid


    [disabled]="f.invalid">Save

    View full-size slide

  20. Template-Driven Forms: Error Validation
    17.10.2018 WDC - Formulare in Angular
    20
    ▪ Add required and show error message if needed

    [(ngModel)]= "employee.firstname" required>

    Firstname is required


    View full-size slide

  21. Template-Driven Forms: Error Validation
    17.10.2018 WDC - Formulare in Angular
    21
    ▪ Extend our forms with nested objects and data
    #firstname="ngModel"
    [(ngModel)]= "employee.firstname" required>
    firstname.touched" class="error">
    Firstname is required

    View full-size slide

  22. Demo
    13.09.2018 Swiss Angular Meetup - Angular Elements
    22

    View full-size slide

  23. Reactive Form
    17.10.2018 WDC - Formulare in Angular
    23

    View full-size slide

  24. Reactive Forms
    17.10.2018 WDC - Formulare in Angular
    24
    import { ReactiveFormsModule } from '@angular/forms';
    @NgModule({
    imports: [ BrowserModule, ReactiveFormsModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
    })
    export class AppModule { }
    ▪ Add the ReactiveFormsModule to your AppModule

    View full-size slide

  25. Reactive Forms
    17.10.2018 WDC - Formulare in Angular
    25
    ngOnInit() {
    this.form = new FormGroup({
    firstname: new FormControl('tga'),
    email: new FormControl('[email protected]')
    });
    }
    ▪ Create our FormModel

    View full-size slide

  26. Reactive Forms
    17.10.2018 WDC - Formulare in Angular
    26


    Firstname




    ▪ Add formGroup and formControlName on the form

    View full-size slide

  27. Reactive Forms
    17.10.2018 WDC - Formulare in Angular
    27
    this.employee.setValue({ firstname: 'Thomas’,
    lastname: 'Gassmann', email: '[email protected]' });
    // OR
    this.form.patchValue({ firstname: 'Thomas' });
    ▪ Set a value from our model use setValue or patchValue

    View full-size slide

  28. Reactive Forms
    17.10.2018 WDC - Formulare in Angular
    28



    ▪ Add submit functionality by adding the ngSubmit
    export class AppComponent {
    form:FormGroup= {…};
    onSubmit() {
    console.log(form.valid)
    }
    }

    View full-size slide

  29. Reactive Forms: Error Validation
    17.10.2018 WDC - Formulare in Angular
    29
    ▪ Disabling our submit button until the form is valid


    [disabled]="form.invalid">Save

    View full-size slide

  30. Reactive Forms: Error Validation
    17.10.2018 WDC - Formulare in Angular
    30
    @Component({...})
    export class EmployeeFormComponent {
    form:FormGroup;
    ngOnInit() {
    this.form = new FormGroup({
    firstname: new FormControl('', Validators.required),
    email: new FormControl('',
    [Validators.required, Validators.minLength(2)]),
    });
    }
    }

    View full-size slide

  31. Reactive Forms: Error Validation
    17.10.2018 WDC - Formulare in Angular
    31
    ▪ Use .get() method that will look up for the control
    && form.get('firstname').touched">
    Firstname is required

    View full-size slide

  32. Reactive Forms: Error Validation
    17.10.2018 WDC - Formulare in Angular
    32
    @Component({...})
    export class EmployeeFormComponent {
    form:FormGroup;
    ngOnInit() {
    this.form = new FormGroup({
    firstname: new FormControl('', Validators.required),
    email: new FormControl('',
    [Validators.required, Validators.minLength(2)]),
    });
    }
    }

    View full-size slide

  33. Reactive Forms - FormBuilder
    17.10.2018 WDC - Formulare in Angular
    33
    ▪ Usage of FormGroup and FormControl is complex
    ▪ Let’s simplify it with FormBuilder
    ▪ FormBuilder is a helper class to build forms
    ▪ It is a flexible and common way to configure forms

    View full-size slide

  34. Reactive Forms - FormBuilder
    17.10.2018 WDC - Formulare in Angular
    34
    constructor(private fb: FormBuilder) {}
    ngOnInit() {
    this.form = this.fb.group({
    firstname: ['', Validators.required],
    email: ['',
    [Validators.required,Validators.minLength(4)]],
    });
    }

    View full-size slide

  35. Demo
    13.09.2018 Swiss Angular Meetup - Angular Elements
    35

    View full-size slide

  36. Custom Control
    17.10.2018 WDC - Formulare in Angular
    36

    View full-size slide

  37. ControlValueAccessor
    17.10.2018 WDC - Formulare in Angular
    37
    ▪ «Bridge» between model and view/DOM
    ▪ Interface which takes care of writing a value and inform
    about changes
    ▪ There is a ControlValueAccessor for every input type

    View full-size slide

  38. Implementing ControlValueAccessor
    17.10.2018 WDC - Formulare in Angular
    38
    export interface ControlValueAccessor {
    // writes a new value
    writeValue(obj: any) : void
    // registers a handler that should be called when
    something in the view has changed
    registerOnChange(fn: any) : void
    // registers a handler specifically for when a
    control receives a touch event
    registerOnTouched(fn: any) : void
    }

    View full-size slide

  39. Registering the ControlValueAccessor
    17.10.2018 WDC - Formulare in Angular
    39
    @Component({ …
    providers: [
    {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => EmployeeRatingComponent),
    multi: true
    }
    ]
    })
    export class EmployeeRatingComponent implements
    ControlValueAccessor {
    }

    View full-size slide

  40. Employee Rating
    17.10.2018 WDC - Formulare in Angular
    40
    writeValue(value: number): void {
    if (value) {
    this.counterValue = value;
    }
    }
    registerOnChange(fn: (rating: number) => void) {
    this.propagateChange = fn;
    }
    registerOnTouched(fn: () => void) {
    this.propagateTouched = fn;
    }

    View full-size slide

  41. Demo
    13.09.2018 Swiss Angular Meetup - Angular Elements
    41

    View full-size slide

  42. updateOn option
    17.10.2018 WDC - Formulare in Angular
    42
    ▪ Updating on every keystroke can sometimes be too
    expensive
    ▪ Angular 5 provides a new option that improves
    performance by delaying form control updates until the
    blur or the submit event.
    email: new FormControl(null, {
    validators: Validators.required,
    updateOn: 'blur'
    }),

    View full-size slide

  43. When use Reactive Forms
    17.10.2018 WDC - Formulare in Angular
    43
    ▪ Dynamically add input elements
    ▪ Watch what the user types
    ▪ Different validation for different situations
    ▪ Immutable data structures

    View full-size slide

  44. Summary
    17.10.2018 WDC - Formulare in Angular
    44
    Template-Driven
    ▪ Generated form model
    ▪ HTML validation
    ▪ Two-way data binding
    Reactive Forms
    ▪ Manually created form
    model
    ▪ Validation in the class
    ▪ No two-way data binding

    View full-size slide

  45. Ressources
    17.10.2018 WDC - Formulare in Angular
    45
    ▪ github.com/gassmannT/AngularForms
    ▪ thomasgassmann.net
    ▪ swissangular.com
    ▪ m.trivadis.com/angular
    ▪ angular-academy.ch

    View full-size slide

  46. Thank you
    Thomas Gassmann
    @gassmannT
    thomasgassmann.net
    [email protected]
    17.10.2018 WDC - Formulare in Angular
    46

    View full-size slide