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

Angular Reactive Forms Developing Forms and Validation with Angular

Angular Reactive Forms Developing Forms and Validation with Angular

Bei fast jeder Angular Applikation kommt irgendwann der Punkt, an dem Informationen von Benutzer benötigt werden: Das Anlegen eines Eintrags, der Login oder eine einfache Bewertungs-Maske. Angular bietet mit Reactive Forms für jeden Anwendungsfall eine passende Formular-Lösung. Aber Benutzereingaben selbst in ihrer einfachsten Form können sehr komplex werden: Felder müssen validiert werden, können komplexe Abhängigkeiten voneinander haben und die Formulare sollten gut testbar sein.

Fabian Gosebrink

March 25, 2021
Tweet

More Decks by Fabian Gosebrink

Other Decks in Technology

Transcript

  1. Angular Reactive
    Forms
    Developing Forms and
    Validation with Angular

    View full-size slide

  2. Template Forms
    Reactive Forms

    View full-size slide

  3. Template Forms
    Reactive Forms

    View full-size slide

  4. Reactive Forms
    import { NgModule } from '@angular/core';
    import { ReactiveFormsModule } from '@angular/forms';
    @NgModule({
    declarations: [...],
    imports: [
    ReactiveFormsModule,
    ],
    providers: [],
    })
    export class AppModule {}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    View full-size slide

  5. Reactive Forms
    import { NgModule } from '@angular/core';
    import { ReactiveFormsModule } from '@angular/forms';
    @NgModule({
    declarations: [...],
    imports: [
    ReactiveFormsModule,
    ],
    providers: [],
    })
    export class AppModule {}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import { ReactiveFormsModule } from '@angular/forms';
    import { NgModule } from '@angular/core';
    1
    2
    3
    @NgModule({
    4
    declarations: [...],
    5
    imports: [
    6
    ReactiveFormsModule,
    7
    ],
    8
    providers: [],
    9
    })
    10
    export class AppModule {}
    11

    View full-size slide

  6. Reactive Forms
    import { NgModule } from '@angular/core';
    import { ReactiveFormsModule } from '@angular/forms';
    @NgModule({
    declarations: [...],
    imports: [
    ReactiveFormsModule,
    ],
    providers: [],
    })
    export class AppModule {}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import { ReactiveFormsModule } from '@angular/forms';
    import { NgModule } from '@angular/core';
    1
    2
    3
    @NgModule({
    4
    declarations: [...],
    5
    imports: [
    6
    ReactiveFormsModule,
    7
    ],
    8
    providers: [],
    9
    })
    10
    export class AppModule {}
    11
    imports: [
    ReactiveFormsModule,
    ],
    import { NgModule } from '@angular/core';
    1
    import { ReactiveFormsModule } from '@angular/forms';
    2
    3
    @NgModule({
    4
    declarations: [...],
    5
    6
    7
    8
    providers: [],
    9
    })
    10
    export class AppModule {}
    11

    View full-size slide

  7. Abstract Control

    View full-size slide

  8. abstract class AbstractControl

    View full-size slide

  9. @angular/forms
    abstract class AbstractControl

    View full-size slide

  10. FormControl
    FormGroup
    FormArray

    View full-size slide

  11. FormControl
    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: ``,
    })
    export class AppComponent {
    name = new FormControl();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    View full-size slide

  12. FormControl
    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: ``,
    })
    export class AppComponent {
    name = new FormControl();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { FormControl } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: ``,
    6
    })
    7
    export class AppComponent {
    8
    name = new FormControl();
    9
    }
    10

    View full-size slide

  13. FormControl
    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: ``,
    })
    export class AppComponent {
    name = new FormControl();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { FormControl } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: ``,
    6
    })
    7
    export class AppComponent {
    8
    name = new FormControl();
    9
    }
    10
    template: ``,
    import { Component } from '@angular/core';
    1
    import { FormControl } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    6
    })
    7
    export class AppComponent {
    8
    name = new FormControl();
    9
    }
    10

    View full-size slide

  14. FormControl
    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: ``,
    })
    export class AppComponent {
    name = new FormControl();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { FormControl } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: ``,
    6
    })
    7
    export class AppComponent {
    8
    name = new FormControl();
    9
    }
    10
    template: ``,
    import { Component } from '@angular/core';
    1
    import { FormControl } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    6
    })
    7
    export class AppComponent {
    8
    name = new FormControl();
    9
    }
    10
    name = new FormControl();
    import { Component } from '@angular/core';
    1
    import { FormControl } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: ``,
    6
    })
    7
    export class AppComponent {
    8
    9
    }
    10

    View full-size slide

  15. FormControl
    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: ``,
    })
    export class AppComponent {
    name = new FormControl();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { FormControl } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: ``,
    6
    })
    7
    export class AppComponent {
    8
    name = new FormControl();
    9
    }
    10
    template: ``,
    import { Component } from '@angular/core';
    1
    import { FormControl } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    6
    })
    7
    export class AppComponent {
    8
    name = new FormControl();
    9
    }
    10
    name = new FormControl();
    import { Component } from '@angular/core';
    1
    import { FormControl } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: ``,
    6
    })
    7
    export class AppComponent {
    8
    9
    }
    10
    template: ``,
    name = new FormControl();
    import { Component } from '@angular/core';
    1
    import { FormControl } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    6
    })
    7
    export class AppComponent {
    8
    9
    }
    10

    View full-size slide

  16. FormControl
    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `

    {{ name.status | json}}
    {{ name.value | json}}
    {{ name.errors | json}}
    `,
    })
    export class AppComponent {
    name = new FormControl();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    View full-size slide

  17. FormControl
    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `

    {{ name.status | json}}
    {{ name.value | json}}
    {{ name.errors | json}}
    `,
    })
    export class AppComponent {
    name = new FormControl();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    {{ name.status | json}}
    {{ name.value | json}}
    {{ name.errors | json}}
    import { Component } from '@angular/core';
    1
    import { FormControl } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7
    8
    9
    10
    `,
    11
    })
    12
    export class AppComponent {
    13
    name = new FormControl();
    14
    }
    15

    View full-size slide

  18. FormControl
    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `

    {{ name.status | json}}
    {{ name.value | json}}
    {{ name.errors | json}}
    `,
    })
    export class AppComponent {
    name = new FormControl();
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    {{ name.status | json}}
    {{ name.value | json}}
    {{ name.errors | json}}
    import { Component } from '@angular/core';
    1
    import { FormControl } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7
    8
    9
    10
    `,
    11
    })
    12
    export class AppComponent {
    13
    name = new FormControl();
    14
    }
    15
    {{ name.status | json}}
    {{ name.value | json}}
    {{ name.errors | json}}
    name = new FormControl();
    import { Component } from '@angular/core';
    1
    import { FormControl } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7
    8
    9
    10
    `,
    11
    })
    12
    export class AppComponent {
    13
    14
    }
    15

    View full-size slide

  19. FormControl
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14

    View full-size slide

  20. FormControl
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    status: string
    value: any
    1
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14

    View full-size slide

  21. FormControl
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    status: string
    value: any
    1
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    valid: boolean
    invalid: boolean
    value: any
    1
    status: string
    2
    3
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14

    View full-size slide

  22. FormControl
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    status: string
    value: any
    1
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    valid: boolean
    invalid: boolean
    value: any
    1
    status: string
    2
    3
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    pending: boolean
    disabled: boolean
    enabled: boolean
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    5
    6
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14

    View full-size slide

  23. FormControl
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    status: string
    value: any
    1
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    valid: boolean
    invalid: boolean
    value: any
    1
    status: string
    2
    3
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    pending: boolean
    disabled: boolean
    enabled: boolean
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    5
    6
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    errors: ValidationErrors | null
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14

    View full-size slide

  24. FormControl
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    status: string
    value: any
    1
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    valid: boolean
    invalid: boolean
    value: any
    1
    status: string
    2
    3
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    pending: boolean
    disabled: boolean
    enabled: boolean
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    5
    6
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    errors: ValidationErrors | null
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    pristine: boolean
    dirty: boolean
    touched: boolean
    untouched: boolean
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    9
    10
    11
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14

    View full-size slide

  25. FormControl
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    status: string
    value: any
    1
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    valid: boolean
    invalid: boolean
    value: any
    1
    status: string
    2
    3
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    pending: boolean
    disabled: boolean
    enabled: boolean
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    5
    6
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    errors: ValidationErrors | null
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    pristine: boolean
    dirty: boolean
    touched: boolean
    untouched: boolean
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    9
    10
    11
    12
    valueChanges: Observable
    13
    statusChanges: Observable
    14
    valueChanges: Observable
    statusChanges: Observable
    value: any
    1
    status: string
    2
    valid: boolean
    3
    invalid: boolean
    4
    pending: boolean
    5
    disabled: boolean
    6
    enabled: boolean
    7
    errors: ValidationErrors | null
    8
    pristine: boolean
    9
    dirty: boolean
    10
    touched: boolean
    11
    untouched: boolean
    12
    13
    14

    View full-size slide

  26. FormControl
    FormGroup
    FormArray

    View full-size slide

  27. FormControl
    FormGroup
    FormArray

    View full-size slide

  28. FormControl
    FormGroup
    FormArray

    View full-size slide

  29. FormGroup
    Container for

    View full-size slide

  30. FormGroup
    Container for
    FormControls

    View full-size slide

  31. FormGroup
    Container for
    FormControls
    FormGroups

    View full-size slide

  32. FormGroup
    [Object object]
    {
    ...
    }

    View full-size slide

  33. import { Component } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup = new FormGroup({
    firstName: new FormControl()
    });
    onSubmit() {
    console.log(this.myFormGroup.get("firstName"))
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    View full-size slide

  34. import { Component } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup = new FormGroup({
    firstName: new FormControl()
    });
    onSubmit() {
    console.log(this.myFormGroup.get("firstName"))
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import { FormControl, FormGroup } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    View full-size slide

  35. import { Component } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup = new FormGroup({
    firstName: new FormControl()
    });
    onSubmit() {
    console.log(this.myFormGroup.get("firstName"))
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import { FormControl, FormGroup } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6
    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    View full-size slide

  36. import { Component } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup = new FormGroup({
    firstName: new FormControl()
    });
    onSubmit() {
    console.log(this.myFormGroup.get("firstName"))
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import { FormControl, FormGroup } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6
    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7
    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    View full-size slide

  37. import { Component } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup = new FormGroup({
    firstName: new FormControl()
    });
    onSubmit() {
    console.log(this.myFormGroup.get("firstName"))
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import { FormControl, FormGroup } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6
    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7
    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21
    myFormGroup = new FormGroup({
    firstName: new FormControl()
    });
    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    15
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    View full-size slide

  38. import { Component } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup = new FormGroup({
    firstName: new FormControl()
    });
    onSubmit() {
    console.log(this.myFormGroup.get("firstName"))
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import { FormControl, FormGroup } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6
    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7
    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21
    myFormGroup = new FormGroup({
    firstName: new FormControl()
    });
    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    15
    16
    17
    onSubmit() {
    18
    console.log(this.myFormGroup.get("firstName"))
    19
    }
    20
    }
    21
    onSubmit() {
    console.log(this.myFormGroup.get("firstName"))
    }
    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    myFormGroup = new FormGroup({
    14
    firstName: new FormControl()
    15
    });
    16
    17
    18
    19
    20
    }
    21

    View full-size slide

  39. registerControl()
    addControl()
    removeControl()
    setControl()

    View full-size slide

  40. setValue()
    patchValue()
    reset()

    View full-size slide

  41. getRawValue()

    View full-size slide

  42. formGroup.getRawValue()

    View full-size slide

  43. formGroup.getRawValue()
    {
    "firstName" : "Obi Wan",
    "lastName" : "Kenobi"
    }
    1
    2
    3
    4

    View full-size slide

  44. formGroup.value

    View full-size slide

  45. formGroup.value
    {
    "firstName" : "Obi Wan"
    }
    1
    2
    3

    View full-size slide

  46. value: any
    status: string
    valid: boolean
    invalid: boolean
    pending: boolean
    disabled: boolean
    enabled: boolean
    errors: ValidationErrors | null
    pristine: boolean
    dirty: boolean
    touched: boolean
    untouched: boolean
    valueChanges: Observable
    statusChanges: Observable

    View full-size slide


  47. Submit

    Also enabled in pending state!

    View full-size slide


  48. Submit

    Only enabled when valid

    View full-size slide

  49. FormBuilder
    import { Component } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup = new FormGroup({
    firstName: new FormControl()
    });
    onSubmit() {
    console.log(this.myFormGroup.get("firstName"))
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    View full-size slide

  50. import { Component } from '@angular/core';
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    constructor(private fb: FormBuilder){
    this.myFormGroup = fb.group({
    firstName: null
    });
    }
    onSubmit(){
    console.log(this.myFormGroup.value)
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

    View full-size slide

  51. import { Component } from '@angular/core';
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    constructor(private fb: FormBuilder){
    this.myFormGroup = fb.group({
    firstName: null
    });
    }
    onSubmit(){
    console.log(this.myFormGroup.value)
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26

    View full-size slide

  52. import { Component } from '@angular/core';
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    constructor(private fb: FormBuilder){
    this.myFormGroup = fb.group({
    firstName: null
    });
    }
    onSubmit(){
    console.log(this.myFormGroup.value)
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26


    Send

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6
    7
    8
    9
    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26

    View full-size slide

  53. import { Component } from '@angular/core';
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    constructor(private fb: FormBuilder){
    this.myFormGroup = fb.group({
    firstName: null
    });
    }
    onSubmit(){
    console.log(this.myFormGroup.value)
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26


    Send

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6
    7
    8
    9
    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26
    constructor(private fb: FormBuilder){
    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26

    View full-size slide

  54. import { Component } from '@angular/core';
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    constructor(private fb: FormBuilder){
    this.myFormGroup = fb.group({
    firstName: null
    });
    }
    onSubmit(){
    console.log(this.myFormGroup.value)
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26


    Send

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6
    7
    8
    9
    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26
    constructor(private fb: FormBuilder){
    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26
    this.myFormGroup = fb.group({
    firstName: null
    });
    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    18
    19
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26

    View full-size slide

  55. import { Component } from '@angular/core';
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    @Component({
    selector: 'my-app',
    template: `


    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    constructor(private fb: FormBuilder){
    this.myFormGroup = fb.group({
    firstName: null
    });
    }
    onSubmit(){
    console.log(this.myFormGroup.value)
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    import { Component } from '@angular/core';
    1
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26


    Send

    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6
    7
    8
    9
    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26
    constructor(private fb: FormBuilder){
    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    17
    this.myFormGroup = fb.group({
    18
    firstName: null
    19
    });
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26
    this.myFormGroup = fb.group({
    firstName: null
    });
    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    myFormGroup: FormGroup;
    15
    16
    constructor(private fb: FormBuilder){
    17
    18
    19
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26
    myFormGroup: FormGroup;
    this.myFormGroup = fb.group({
    firstName: null
    });
    import { Component } from '@angular/core';
    1
    import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
    2
    3
    @Component({
    4
    selector: 'my-app',
    5
    template: `
    6

    7

    8
    Send
    9

    10
    `
    11
    })
    12
    export class AppComponent {
    13
    14
    15
    16
    constructor(private fb: FormBuilder){
    17
    18
    19
    20
    }
    21
    22
    onSubmit(){
    23
    console.log(this.myFormGroup.value)
    24
    }
    25
    }
    26

    View full-size slide

  56. profileForm = new FormGroup({
    firstName: new FormControl('')
    lastName: new FormControl(''),
    address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
    })
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
    street: [''],
    city: [''],
    state: [''],
    zip: ['']
    }),
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    View full-size slide

  57. FormControl
    FormGroup
    FormArray

    View full-size slide

  58. FormControl
    FormGroup
    FormArray

    View full-size slide

  59. FormArray
    Array of Form controls

    View full-size slide

  60. FormArray
    Array of Form controls
    Dynamic controls

    View full-size slide

  61. FormArray
    Array of Form controls
    Iterating over controls
    Dynamic controls

    View full-size slide

  62. FormArray
    Array of Form controls
    Iterating over controls
    Dynamic controls
    Serialized as array

    View full-size slide

  63. FormArray
    import { Component } from "@angular/core";
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `


    [formControlName]="i" />

    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    formArray: FormArray;
    constructor(private fb: FormBuilder) {
    this.formArray = fb.array([new FormControl("")])
    this.myFormGroup = fb.group({
    myFormArray: this.formArray
    });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

    View full-size slide

  64. FormArray
    import { Component } from "@angular/core";
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `


    [formControlName]="i" />

    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    formArray: FormArray;
    constructor(private fb: FormBuilder) {
    this.formArray = fb.array([new FormControl("")])
    this.myFormGroup = fb.group({
    myFormArray: this.formArray
    });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    myFormGroup: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9
    [formControlName]="i" />
    10

    11
    Send
    12

    13
    `
    14
    })
    15
    export class AppComponent {
    16
    17
    18
    19
    constructor(private fb: FormBuilder) {
    20
    this.formArray = fb.array([new FormControl("")])
    21
    this.myFormGroup = fb.group({
    22
    myFormArray: this.formArray
    23
    });
    24
    }
    25
    }
    26

    View full-size slide

  65. FormArray
    import { Component } from "@angular/core";
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `


    [formControlName]="i" />

    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    formArray: FormArray;
    constructor(private fb: FormBuilder) {
    this.formArray = fb.array([new FormControl("")])
    this.myFormGroup = fb.group({
    myFormArray: this.formArray
    });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    myFormGroup: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9
    [formControlName]="i" />
    10

    11
    Send
    12

    13
    `
    14
    })
    15
    export class AppComponent {
    16
    17
    18
    19
    constructor(private fb: FormBuilder) {
    20
    this.formArray = fb.array([new FormControl("")])
    21
    this.myFormGroup = fb.group({
    22
    myFormArray: this.formArray
    23
    });
    24
    }
    25
    }
    26
    this.formArray = fb.array([new FormControl("")])
    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9
    [formControlName]="i" />
    10

    11
    Send
    12

    13
    `
    14
    })
    15
    export class AppComponent {
    16
    myFormGroup: FormGroup;
    17
    formArray: FormArray;
    18
    19
    constructor(private fb: FormBuilder) {
    20
    21
    this.myFormGroup = fb.group({
    22
    myFormArray: this.formArray
    23
    });
    24
    }
    25
    }
    26

    View full-size slide

  66. FormArray
    import { Component } from "@angular/core";
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `


    [formControlName]="i" />

    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    formArray: FormArray;
    constructor(private fb: FormBuilder) {
    this.formArray = fb.array([new FormControl("")])
    this.myFormGroup = fb.group({
    myFormArray: this.formArray
    });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    myFormGroup: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9
    [formControlName]="i" />
    10

    11
    Send
    12

    13
    `
    14
    })
    15
    export class AppComponent {
    16
    17
    18
    19
    constructor(private fb: FormBuilder) {
    20
    this.formArray = fb.array([new FormControl("")])
    21
    this.myFormGroup = fb.group({
    22
    myFormArray: this.formArray
    23
    });
    24
    }
    25
    }
    26
    this.formArray = fb.array([new FormControl("")])
    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9
    [formControlName]="i" />
    10

    11
    Send
    12

    13
    `
    14
    })
    15
    export class AppComponent {
    16
    myFormGroup: FormGroup;
    17
    formArray: FormArray;
    18
    19
    constructor(private fb: FormBuilder) {
    20
    21
    this.myFormGroup = fb.group({
    22
    myFormArray: this.formArray
    23
    });
    24
    }
    25
    }
    26
    this.myFormGroup = fb.group({
    myFormArray: this.formArray
    });
    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9
    [formControlName]="i" />
    10

    11
    Send
    12

    13
    `
    14
    })
    15
    export class AppComponent {
    16
    myFormGroup: FormGroup;
    17
    formArray: FormArray;
    18
    19
    constructor(private fb: FormBuilder) {
    20
    this.formArray = fb.array([new FormControl("")])
    21
    22
    23
    24
    }
    25
    }
    26

    View full-size slide

  67. FormArray
    import { Component } from "@angular/core";
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `


    [formControlName]="i" />

    Send

    `
    })
    export class AppComponent {
    myFormGroup: FormGroup;
    formArray: FormArray;
    constructor(private fb: FormBuilder) {
    this.formArray = fb.array([new FormControl("")])
    this.myFormGroup = fb.group({
    myFormArray: this.formArray
    });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    myFormGroup: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9
    [formControlName]="i" />
    10

    11
    Send
    12

    13
    `
    14
    })
    15
    export class AppComponent {
    16
    17
    18
    19
    constructor(private fb: FormBuilder) {
    20
    this.formArray = fb.array([new FormControl("")])
    21
    this.myFormGroup = fb.group({
    22
    myFormArray: this.formArray
    23
    });
    24
    }
    25
    }
    26
    this.formArray = fb.array([new FormControl("")])
    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9
    [formControlName]="i" />
    10

    11
    Send
    12

    13
    `
    14
    })
    15
    export class AppComponent {
    16
    myFormGroup: FormGroup;
    17
    formArray: FormArray;
    18
    19
    constructor(private fb: FormBuilder) {
    20
    21
    this.myFormGroup = fb.group({
    22
    myFormArray: this.formArray
    23
    });
    24
    }
    25
    }
    26
    this.myFormGroup = fb.group({
    myFormArray: this.formArray
    });
    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9
    [formControlName]="i" />
    10

    11
    Send
    12

    13
    `
    14
    })
    15
    export class AppComponent {
    16
    myFormGroup: FormGroup;
    17
    formArray: FormArray;
    18
    19
    constructor(private fb: FormBuilder) {
    20
    this.formArray = fb.array([new FormControl("")])
    21
    22
    23
    24
    }
    25
    }
    26


    [formControlName]="i" />

    Send

    import { Component } from "@angular/core";
    1
    import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6
    7
    8
    9
    10
    11
    12
    13
    `
    14
    })
    15
    export class AppComponent {
    16
    myFormGroup: FormGroup;
    17
    formArray: FormArray;
    18
    19
    constructor(private fb: FormBuilder) {
    20
    this.formArray = fb.array([new FormControl("")])
    21
    this.myFormGroup = fb.group({
    22
    myFormArray: this.formArray
    23
    });
    24
    }
    25
    }
    26

    View full-size slide

  68. FormArray
    import { Component } from "@angular/core";
    import { FormArray, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `





    `
    })
    export class AppComponent {
    myForm: FormGroup;
    formArray: FormArray;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24

    View full-size slide

  69. FormArray
    import { Component } from "@angular/core";
    import { FormArray, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `





    `
    })
    export class AppComponent {
    myForm: FormGroup;
    formArray: FormArray;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    myForm: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    15
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24

    View full-size slide

  70. FormArray
    import { Component } from "@angular/core";
    import { FormArray, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `





    `
    })
    export class AppComponent {
    myForm: FormGroup;
    formArray: FormArray;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    myForm: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    15
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24

    View full-size slide

  71. FormArray
    import { Component } from "@angular/core";
    import { FormArray, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `





    `
    })
    export class AppComponent {
    myForm: FormGroup;
    formArray: FormArray;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    myForm: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    15
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    22
    }
    23
    }
    24

    View full-size slide

  72. FormArray
    import { Component } from "@angular/core";
    import { FormArray, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `





    `
    })
    export class AppComponent {
    myForm: FormGroup;
    formArray: FormArray;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    myForm: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    15
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    22
    }
    23
    }
    24


    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6
    7

    8

    9

    10
    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24

    View full-size slide

  73. FormArray
    import { Component } from "@angular/core";
    import { FormArray, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `





    `
    })
    export class AppComponent {
    myForm: FormGroup;
    formArray: FormArray;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    myForm: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    15
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    22
    }
    23
    }
    24


    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6
    7

    8

    9

    10
    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24


    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7
    8

    9
    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24

    View full-size slide

  74. FormArray
    import { Component } from "@angular/core";
    import { FormArray, FormBuilder } from "@angular/forms";
    @Component({
    selector: "my-app",
    template: `





    `
    })
    export class AppComponent {
    myForm: FormGroup;
    formArray: FormArray;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    myForm: FormGroup;
    formArray: FormArray;
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    15
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8

    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    22
    }
    23
    }
    24


    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6
    7

    8

    9

    10
    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24


    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7
    8

    9
    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24

    import { Component } from "@angular/core";
    1
    import { FormArray, FormBuilder } from "@angular/forms";
    2
    3
    @Component({
    4
    selector: "my-app",
    5
    template: `
    6

    7

    8
    9

    10

    11
    `
    12
    })
    13
    export class AppComponent {
    14
    myForm: FormGroup;
    15
    formArray: FormArray;
    16
    17
    constructor(private formBuilder: FormBuilder) {}
    18
    19
    ngOnInit() {
    20
    this.formArray = this.formBuilder.array([new FormGroup({ ... })])
    21
    this.myForm = this.formBuilder.group({ myFormArray: this.formArray });
    22
    }
    23
    }
    24

    View full-size slide

  75. Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: '',
    lastName: '',
    age: '',
    room: null,
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    View full-size slide

  76. Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    View full-size slide

  77. Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { Component, OnInit } from '@angular/core';
    1
    2
    import { Room } from './room';
    3
    4
    @Component({ /* ... */ })
    5
    export class FormComponent implements OnInit {
    6
    myForm: FormGroup;
    7
    8
    constructor(private formBuilder: FormBuilder) {}
    9
    10
    ngOnInit() {
    11
    this.myForm = this.formBuilder.group(
    12
    {
    13
    firstName: ['', Validators.required],
    14
    lastName: ['', Validators.required],
    15
    age: ['', Validators.required],
    16
    room: [null, Validators.required],
    17
    }
    18
    );
    19
    }
    20
    }
    21

    View full-size slide

  78. Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    import { Component, OnInit } from '@angular/core';
    1
    2
    import { Room } from './room';
    3
    4
    @Component({ /* ... */ })
    5
    export class FormComponent implements OnInit {
    6
    myForm: FormGroup;
    7
    8
    constructor(private formBuilder: FormBuilder) {}
    9
    10
    ngOnInit() {
    11
    this.myForm = this.formBuilder.group(
    12
    {
    13
    firstName: ['', Validators.required],
    14
    lastName: ['', Validators.required],
    15
    age: ['', Validators.required],
    16
    room: [null, Validators.required],
    17
    }
    18
    );
    19
    }
    20
    }
    21
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    import { Component, OnInit } from '@angular/core';
    1
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    2
    import { Room } from './room';
    3
    4
    @Component({ /* ... */ })
    5
    export class FormComponent implements OnInit {
    6
    myForm: FormGroup;
    7
    8
    constructor(private formBuilder: FormBuilder) {}
    9
    10
    ngOnInit() {
    11
    12
    13
    14
    15
    16
    17
    18
    19
    }
    20
    }
    21

    View full-size slide

  79. Validation
    class Validators {
    static required(control: AbstractControl): ValidationErrors | null
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    View full-size slide

  80. Validation
    class Validators {
    static min(min: number): ValidatorFn
    static max(max: number): ValidatorFn
    static required(control: AbstractControl): ValidationErrors | null
    static requiredTrue(control: AbstractControl): ValidationErrors | null
    static email(control: AbstractControl): ValidationErrors | null
    static minLength(minLength: number): ValidatorFn
    static maxLength(maxLength: number): ValidatorFn
    static pattern(pattern: string | RegExp): ValidatorFn
    static nullValidator(control: AbstractControl): ValidationErrors | null
    static compose(validators: ValidatorFn[]): ValidatorFn | null
    static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    View full-size slide

  81. Validation
    myForm.get('controlName').errors?.min
    .max
    .required
    .requiredTrue
    .email
    .minLength
    .maxLength
    .pattern
    .nullValidator
    .compose
    .composeAsync
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    View full-size slide

  82. Validation
    .ng-valid
    .ng-invalid
    .ng-pending
    .ng-pristine
    .ng-dirty
    .ng-untouched
    .ng-touched
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    View full-size slide

  83. Custom Validation

    View full-size slide

  84. Custom Validation
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    View full-size slide

  85. Custom Validation
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    View full-size slide

  86. Custom Validation
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    }
    12

    View full-size slide

  87. Custom Validation
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    }
    12
    static myValidator(control: AbstractControl) {
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    if (control.value ... ) {
    6
    return { someProp: true };
    7
    }
    8
    9
    return null;
    10
    }
    11
    }
    12

    View full-size slide

  88. Custom Validation
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    }
    12
    static myValidator(control: AbstractControl) {
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    if (control.value ... ) {
    6
    return { someProp: true };
    7
    }
    8
    9
    return null;
    10
    }
    11
    }
    12
    if (control.value ... ) {
    return { someProp: true };
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    static myValidator(control: AbstractControl) {
    5
    6
    7
    8
    9
    return null;
    10
    }
    11
    }
    12

    View full-size slide

  89. Custom Validation
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    }
    12
    static myValidator(control: AbstractControl) {
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    if (control.value ... ) {
    6
    return { someProp: true };
    7
    }
    8
    9
    return null;
    10
    }
    11
    }
    12
    if (control.value ... ) {
    return { someProp: true };
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    static myValidator(control: AbstractControl) {
    5
    6
    7
    8
    9
    return null;
    10
    }
    11
    }
    12
    return null;
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    static myValidator(control: AbstractControl) {
    5
    if (control.value ... ) {
    6
    return { someProp: true };
    7
    }
    8
    9
    10
    }
    11
    }
    12

    View full-size slide

  90. Custom Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    View full-size slide

  91. Custom Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    age: ['', Validators.required],
    room: [null, Validators.required],
    import { Component, OnInit } from '@angular/core';
    1
    import { FormBuilder, FormGroup } from '@angular/forms';
    2
    import { Room } from './room';
    3
    4
    @Component({ /* ... */ })
    5
    export class FormComponent implements OnInit {
    6
    myForm: FormGroup;
    7
    8
    constructor(private formBuilder: FormBuilder) {}
    9
    10
    ngOnInit() {
    11
    this.myForm = this.formBuilder.group(
    12
    {
    13
    14
    15
    16
    17
    }
    18
    );
    19
    }
    20
    }
    21

    View full-size slide

  92. Custom Validation
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]]
    age: ['', Validators.required],
    room: [null, Validators.required],
    import { Component, OnInit } from '@angular/core';
    1
    import { FormBuilder, FormGroup } from '@angular/forms';
    2
    import { Room } from './room';
    3
    4
    @Component({ /* ... */ })
    5
    export class FormComponent implements OnInit {
    6
    myForm: FormGroup;
    7
    8
    constructor(private formBuilder: FormBuilder) {}
    9
    10
    ngOnInit() {
    11
    this.myForm = this.formBuilder.group(
    12
    {
    13
    14
    15
    16
    17
    }
    18
    );
    19
    }
    20
    }
    21

    View full-size slide

  93. Async Validation

    View full-size slide

  94. Async Validation

    View full-size slide

  95. Async Validation
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myAsyncValidator(control: AbstractControl)
    : Observable {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myAsyncValidator(control: AbstractControl)
    : Observable {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    View full-size slide

  96. Async Validation
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myAsyncValidator(control: AbstractControl)
    : Observable {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myAsyncValidator(control: AbstractControl)
    : Observable {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    static myAsyncValidator(control: AbstractControl)
    : Observable {
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    6
    // ...
    7
    }
    8
    9
    }
    10

    View full-size slide

  97. Async Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    rooms: Room[] = [ /* ... */ ];
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

    View full-size slide

  98. Async Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    rooms: Room[] = [ /* ... */ ];
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    import { Component, OnInit } from '@angular/core';
    1
    import { FormBuilder, FormGroup } from '@angular/forms';
    2
    import { Room } from './room';
    3
    4
    @Component({ /* ... */ })
    5
    export class FormComponent implements OnInit {
    6
    myForm: FormGroup;
    7
    8
    rooms: Room[] = [ /* ... */ ];
    9
    10
    constructor(private formBuilder: FormBuilder) {}
    11
    12
    ngOnInit() {
    13
    14
    15
    16
    17
    18
    19
    20
    );
    21
    }
    22
    }
    23

    View full-size slide

  99. Async Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    rooms: Room[] = [ /* ... */ ];
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required], [MyCustomValidator.myAsyncValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

    View full-size slide

  100. Async Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    rooms: Room[] = [ /* ... */ ];
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required], [MyCustomValidator.myAsyncValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required], [MyCustomValidator.myAsyncValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    import { Component, OnInit } from '@angular/core';
    1
    import { FormBuilder, FormGroup } from '@angular/forms';
    2
    import { Room } from './room';
    3
    4
    @Component({ /* ... */ })
    5
    export class FormComponent implements OnInit {
    6
    myForm: FormGroup;
    7
    8
    rooms: Room[] = [ /* ... */ ];
    9
    10
    constructor(private formBuilder: FormBuilder) {}
    11
    12
    ngOnInit() {
    13
    14
    15
    16
    17
    18
    19
    20
    );
    21
    }
    22
    }
    23

    View full-size slide

  101. Cross Field
    Validation

    View full-size slide

  102. Cross Field Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    rooms: Room[] = [ /* ... */ ];
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

    View full-size slide

  103. Cross Field Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    rooms: Room[] = [ /* ... */ ];
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
    import { Component, OnInit } from '@angular/core';
    1
    import { FormBuilder, FormGroup } from '@angular/forms';
    2
    import { Room } from './room';
    3
    4
    @Component({ /* ... */ })
    5
    export class FormComponent implements OnInit {
    6
    myForm: FormGroup;
    7
    8
    rooms: Room[] = [ /* ... */ ];
    9
    10
    constructor(private formBuilder: FormBuilder) {}
    11
    12
    ngOnInit() {
    13
    this.myForm = this.formBuilder.group(
    14
    {
    15
    firstName: ['', Validators.required],
    16
    17
    age: ['', Validators.required],
    18
    room: [null, Validators.required],
    19
    }
    20
    );
    21
    }
    22
    }
    23

    View full-size slide

  104. Cross Field Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    rooms: Room[] = [ /* ... */ ];
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    },
    {
    validators: [...],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

    View full-size slide

  105. Cross Field Validation
    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import { Room } from './room';
    @Component({ /* ... */ })
    export class FormComponent implements OnInit {
    myForm: FormGroup;
    rooms: Room[] = [ /* ... */ ];
    constructor(private formBuilder: FormBuilder) {}
    ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ['', Validators.required],
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
    age: ['', Validators.required],
    room: [null, Validators.required],
    },
    {
    validators: [...],
    }
    );
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    {
    validators: [...],
    }
    import { Component, OnInit } from '@angular/core';
    1
    import { FormBuilder, FormGroup } from '@angular/forms';
    2
    import { Room } from './room';
    3
    4
    @Component({ /* ... */ })
    5
    export class FormComponent implements OnInit {
    6
    myForm: FormGroup;
    7
    8
    rooms: Room[] = [ /* ... */ ];
    9
    10
    constructor(private formBuilder: FormBuilder) {}
    11
    12
    ngOnInit() {
    13
    this.myForm = this.formBuilder.group(
    14
    {
    15
    firstName: ['', Validators.required],
    16
    lastName: ['', [Validators.required, MyCustomValidator.myValidator]],
    17
    age: ['', Validators.required],
    18
    room: [null, Validators.required],
    19
    },
    20
    21
    22
    23
    );
    24
    }
    25
    }
    26

    View full-size slide

  106. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms';
    export class MyFormValidator {
    static formValidator(/* ... */): ValidatorFn {
    return (formGroup: AbstractControl) => {
    // return null if everything is okay
    // otherwise an object
    };
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    View full-size slide

  107. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms';
    export class MyFormValidator {
    static formValidator(/* ... */): ValidatorFn {
    return (formGroup: AbstractControl) => {
    // return null if everything is okay
    // otherwise an object
    };
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    export class MyFormValidator {
    }
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    2
    3
    static formValidator(/* ... */): ValidatorFn {
    4
    return (formGroup: AbstractControl) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    }
    9
    10

    View full-size slide

  108. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms';
    export class MyFormValidator {
    static formValidator(/* ... */): ValidatorFn {
    return (formGroup: AbstractControl) => {
    // return null if everything is okay
    // otherwise an object
    };
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    export class MyFormValidator {
    }
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    2
    3
    static formValidator(/* ... */): ValidatorFn {
    4
    return (formGroup: AbstractControl) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    }
    9
    10
    static formValidator(/* ... */): ValidatorFn {
    }
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    2
    export class MyFormValidator {
    3
    4
    return (formGroup: AbstractControl) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    9
    }
    10

    View full-size slide

  109. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms';
    export class MyFormValidator {
    static formValidator(/* ... */): ValidatorFn {
    return (formGroup: AbstractControl) => {
    // return null if everything is okay
    // otherwise an object
    };
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    export class MyFormValidator {
    }
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    2
    3
    static formValidator(/* ... */): ValidatorFn {
    4
    return (formGroup: AbstractControl) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    }
    9
    10
    static formValidator(/* ... */): ValidatorFn {
    }
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    2
    export class MyFormValidator {
    3
    4
    return (formGroup: AbstractControl) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    9
    }
    10
    return (formGroup: AbstractControl) => {
    };
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    2
    export class MyFormValidator {
    3
    static formValidator(/* ... */): ValidatorFn {
    4
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    8
    }
    9
    }
    10

    View full-size slide

  110. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms';
    export class MyFormValidator {
    static formValidator(value: any): ValidatorFn {
    return (formGroup: AbstractControl) => {
    // return null if everything is okay
    // otherwise an object
    };
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    View full-size slide

  111. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms';
    export class MyFormValidator {
    static formValidator(value: any): ValidatorFn {
    return (formGroup: AbstractControl) => {
    // return null if everything is okay
    // otherwise an object
    };
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    static formValidator(value: any): ValidatorFn {
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    2
    export class MyFormValidator {
    3
    4
    return (formGroup: AbstractControl) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    }
    9
    }
    10

    View full-size slide

  112. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms';
    import { Room } from './room';
    export class MyFormValidator {
    static formValidator(value: any): ValidatorFn {
    return (formGroup: FormGroup) => {
    const control1 = formGroup.get('control1Name');
    const control2 = formGroup.get('control2Name');
    if(/* ... */) {
    // ...
    }
    return null;
    };
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    View full-size slide

  113. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms';
    import { Room } from './room';
    export class MyFormValidator {
    static formValidator(value: any): ValidatorFn {
    return (formGroup: FormGroup) => {
    const control1 = formGroup.get('control1Name');
    const control2 = formGroup.get('control2Name');
    if(/* ... */) {
    // ...
    }
    return null;
    };
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const control1 = formGroup.get('control1Name');
    const control2 = formGroup.get('control2Name');
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    import { Room } from './room';
    2
    3
    export class MyFormValidator {
    4
    static formValidator(value: any): ValidatorFn {
    5
    return (formGroup: FormGroup) => {
    6
    7
    8
    9
    if(/* ... */) {
    10
    // ...
    11
    }
    12
    13
    return null;
    14
    };
    15
    }
    16
    }
    17

    View full-size slide

  114. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms';
    import { Room } from './room';
    export class MyFormValidator {
    static formValidator(value: any): ValidatorFn {
    return (formGroup: FormGroup) => {
    const control1 = formGroup.get('control1Name');
    const control2 = formGroup.get('control2Name');
    if(/* ... */) {
    // ...
    }
    return null;
    };
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const control1 = formGroup.get('control1Name');
    const control2 = formGroup.get('control2Name');
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    import { Room } from './room';
    2
    3
    export class MyFormValidator {
    4
    static formValidator(value: any): ValidatorFn {
    5
    return (formGroup: FormGroup) => {
    6
    7
    8
    9
    if(/* ... */) {
    10
    // ...
    11
    }
    12
    13
    return null;
    14
    };
    15
    }
    16
    }
    17
    if(/* ... */) {
    // ...
    }
    return null;
    import { FormGroup, ValidatorFn } from '@angular/forms';
    1
    import { Room } from './room';
    2
    3
    export class MyFormValidator {
    4
    static formValidator(value: any): ValidatorFn {
    5
    return (formGroup: FormGroup) => {
    6
    const control1 = formGroup.get('control1Name');
    7
    const control2 = formGroup.get('control2Name');
    8
    9
    10
    11
    12
    13
    14
    };
    15
    }
    16
    }
    17

    View full-size slide

  115. Testing
    import { FormControl, ValidatorFn } from '@angular/forms';
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    View full-size slide

  116. Testing
    import { FormControl, ValidatorFn } from '@angular/forms';
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    View full-size slide

  117. Testing
    import { FormControl, ValidatorFn } from '@angular/forms';
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    });
    14

    View full-size slide

  118. Testing
    import { FormControl, ValidatorFn } from '@angular/forms';
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    });
    14
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    6
    7
    8
    9
    10
    11
    12
    });
    13
    });
    14

    View full-size slide

  119. Testing
    import { FormControl, ValidatorFn } from '@angular/forms';
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    });
    14
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    6
    7
    8
    9
    10
    11
    12
    });
    13
    });
    14
    const formControl = new FormControl('');
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    7
    formControl.value = '';
    8
    const result = MyCustomValidator.myValidator(formControl);
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14

    View full-size slide

  120. Testing
    import { FormControl, ValidatorFn } from '@angular/forms';
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    });
    14
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    6
    7
    8
    9
    10
    11
    12
    });
    13
    });
    14
    const formControl = new FormControl('');
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    7
    formControl.value = '';
    8
    const result = MyCustomValidator.myValidator(formControl);
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14
    formControl.value = '';
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    const formControl = new FormControl('');
    7
    8
    const result = MyCustomValidator.myValidator(formControl);
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14

    View full-size slide

  121. Testing
    import { FormControl, ValidatorFn } from '@angular/forms';
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    });
    14
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    6
    7
    8
    9
    10
    11
    12
    });
    13
    });
    14
    const formControl = new FormControl('');
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    7
    formControl.value = '';
    8
    const result = MyCustomValidator.myValidator(formControl);
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14
    formControl.value = '';
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    const formControl = new FormControl('');
    7
    8
    const result = MyCustomValidator.myValidator(formControl);
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14
    const result = MyCustomValidator.myValidator(formControl);
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    const formControl = new FormControl('');
    7
    formControl.value = '';
    8
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14

    View full-size slide

  122. Testing
    import { FormControl, ValidatorFn } from '@angular/forms';
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('MyValidator', () => {
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    describe('should return valid if', () => {
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    });
    14
    it('value is empty', () => {
    const formControl = new FormControl('');
    formControl.value = '';
    const result = MyCustomValidator.myValidator(formControl);
    expect(result.ageNotValid).toBe(true);
    });
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    6
    7
    8
    9
    10
    11
    12
    });
    13
    });
    14
    const formControl = new FormControl('');
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    7
    formControl.value = '';
    8
    const result = MyCustomValidator.myValidator(formControl);
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14
    formControl.value = '';
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    const formControl = new FormControl('');
    7
    8
    const result = MyCustomValidator.myValidator(formControl);
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14
    const result = MyCustomValidator.myValidator(formControl);
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    const formControl = new FormControl('');
    7
    formControl.value = '';
    8
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14
    expect(result.ageNotValid).toBe(true);
    import { FormControl, ValidatorFn } from '@angular/forms';
    1
    2
    describe('MyValidator', () => {
    3
    describe('should return valid if', () => {
    4
    5
    it('value is empty', () => {
    6
    const formControl = new FormControl('');
    7
    formControl.value = '';
    8
    const result = MyCustomValidator.myValidator(formControl);
    9
    10
    });
    11
    12
    });
    13
    });
    14

    View full-size slide

  123. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    View full-size slide

  124. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    21
    const formGroup = new FormGroup({
    22

    View full-size slide

  125. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20

    View full-size slide

  126. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    9
    10
    11
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    21

    View full-size slide

  127. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    9
    10
    11
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const result = validatorFn(formGroup);
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    21
    const formGroup = new FormGroup({
    22
    age: new FormControl(20),
    23
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    24
    });
    25

    View full-size slide

  128. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    9
    10
    11
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const result = validatorFn(formGroup);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    expect(result).not.toEqual(null);
    describe( restricts age correctly , () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    21
    const formGroup = new FormGroup({
    22
    age: new FormControl(20),
    23
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    24
    });
    25
    26
    const result validatorFn(formGroup);
    27

    View full-size slide

  129. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    9
    10
    11
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const result = validatorFn(formGroup);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    expect(result).not.toEqual(null);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    const formGroup = new FormGroup({
    age: new FormControl(20),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).toEqual(null);
    });
    });
    ({ , }),
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    });
    32

    View full-size slide

  130. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    9
    10
    11
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const result = validatorFn(formGroup);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    expect(result).not.toEqual(null);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    19
    20
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    20
    21
    const formGroup = new FormGroup({
    22
    age: new FormControl(20),
    23
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    24
    });
    25
    26
    const result = validatorFn(formGroup);
    27
    28
    expect(result).toEqual(null);
    29
    });
    30

    View full-size slide

  131. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    9
    10
    11
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const result = validatorFn(formGroup);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    expect(result).not.toEqual(null);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    19
    20 const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    20
    const formGroup = new FormGroup({
    age: new FormControl(20),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    ({ , }),
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    21
    22
    23
    24
    25
    26
    const result = validatorFn(formGroup);
    27
    28
    expect(result).toEqual(null);
    29
    });
    30
    });
    31
    });
    32

    View full-size slide

  132. Testing
    import { FormControl, FormGroup } from '@angular/forms';
    import { RestrictAgeValidator } from './restrict-age.validator';
    describe('RestrictAgeValidator', () => {
    describe('restricts age correctly', () => {
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    it('should not return null when given age is under the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    const result = validatorFn(formGroup);
    expect(result).not.toEqual(null);
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const formGroup = new FormGroup({
    age: new FormControl(9),
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    });
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    9
    10
    11
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const result = validatorFn(formGroup);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    expect(result).not.toEqual(null);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    it('should return null when given age is above the required age', () => {
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    19
    20 const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    20
    import { FormControl, FormGroup } from '@angular/forms';
    1
    import { RestrictAgeValidator } from './restrict-age.validator';
    2
    3
    describe('RestrictAgeValidator', () => {
    4
    describe('restricts age correctly', () => {
    5
    it('should not return null when given age is under the required age', () => {
    6
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(10);
    7
    8
    const formGroup = new FormGroup({
    9
    age: new FormControl(9),
    10
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    11
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    const result = validatorFn(formGroup);
    expect(result).toEqual(null);
    ({ , }),
    });
    12
    13
    const result = validatorFn(formGroup);
    14
    15
    expect(result).not.toEqual(null);
    16
    });
    17
    18
    it('should return null when given age is above the required age', () => {
    19
    const validatorFn = RestrictAgeValidator.restrictAgeValidator(18);
    20
    21
    const formGroup = new FormGroup({
    22
    age: new FormControl(20),
    23
    room: new FormControl({ text: 'room 2', value: 'room-2' }),
    24
    });
    25
    26
    27
    28
    29
    });
    30
    });
    31
    });
    32

    View full-size slide

  133. ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ...,
    lastName: ...,
    ...
    },
    {
    ...
    }
    );
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ValueChanges

    View full-size slide

  134. ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ...,
    lastName: ...,
    ...
    },
    {
    ...
    }
    );
    this.myForm.valueChanges.subscribe(console.log);
    this.myForm.get('firstName').valueChanges.subscribe(console.log);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ValueChanges

    View full-size slide

  135. ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ...,
    lastName: ...,
    ...
    },
    {
    ...
    }
    );
    this.myForm.valueChanges.subscribe(console.log);
    this.myForm.get('firstName').valueChanges.subscribe(console.log);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    this.myForm.valueChanges.subscribe(console.log);
    ngOnInit() {
    1
    this.myForm = this.formBuilder.group(
    2
    {
    3
    firstName: ...,
    4
    lastName: ...,
    5
    ...
    6
    },
    7
    {
    8
    ...
    9
    }
    10
    );
    11
    12
    13
    this.myForm.get('firstName').valueChanges.subscribe(console.log);
    14
    }
    15
    ValueChanges

    View full-size slide

  136. ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ...,
    lastName: ...,
    ...
    },
    {
    ...
    }
    );
    this.myForm.valueChanges.subscribe(console.log);
    this.myForm.get('firstName').valueChanges.subscribe(console.log);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    this.myForm.valueChanges.subscribe(console.log);
    ngOnInit() {
    1
    this.myForm = this.formBuilder.group(
    2
    {
    3
    firstName: ...,
    4
    lastName: ...,
    5
    ...
    6
    },
    7
    {
    8
    ...
    9
    }
    10
    );
    11
    12
    13
    this.myForm.get('firstName').valueChanges.subscribe(console.log);
    14
    }
    15
    this.myForm.get('firstName').valueChanges.subscribe(console.log);
    ngOnInit() {
    1
    this.myForm = this.formBuilder.group(
    2
    {
    3
    firstName: ...,
    4
    lastName: ...,
    5
    ...
    6
    },
    7
    {
    8
    ...
    9
    }
    10
    );
    11
    12
    this.myForm.valueChanges.subscribe(console.log);
    13
    14
    }
    15
    ValueChanges

    View full-size slide

  137. Custom Form
    Controls

    View full-size slide

  138. Custom Form Controls





    1
    2
    3
    4
    5

    View full-size slide

  139. Control Value
    Accessor

    View full-size slide

  140. Control Value Accessor
    import { Component } from '@angular/core';
    import { ControlValueAccessor } from '@angular/forms';
    @Component({ /* ... */ })
    export class MyComponent implements ControlValueAccessor {
    writeValue(obj: any): void {
    // ...
    }
    registerOnChange(fn: any): void {
    // ...
    }
    registerOnTouched(fn: any): void {
    // ...
    }
    setDisabledState?(isDisabled: boolean): void {
    // ...
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    View full-size slide

  141. Control Value Accessor
    import { Component } from '@angular/core';
    import { ControlValueAccessor } from '@angular/forms';
    @Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss'],
    providers: [
    {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyComponent),
    multi: true,
    },
    ],
    })
    export class MyComponent implements ControlValueAccessor {
    //...
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    View full-size slide

  142. Control Value Accessor
    import { Component } from '@angular/core';
    import { ControlValueAccessor } from '@angular/forms';
    @Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.scss'],
    providers: [
    {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyComponent),
    multi: true,
    },
    ],
    })
    export class MyComponent implements ControlValueAccessor {
    //...
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    providers: [
    {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyComponent),
    multi: true,
    },
    ],
    import { Component } from '@angular/core';
    1
    import { ControlValueAccessor } from '@angular/forms';
    2
    3
    @Component({
    4
    selector: 'app-my-component',
    5
    templateUrl: './my.component.html',
    6
    styleUrls: ['./my.component.scss'],
    7
    8
    9
    10
    11
    12
    13
    14
    })
    15
    export class MyComponent implements ControlValueAccessor {
    16
    17
    //...
    18
    19
    }
    20

    View full-size slide

  143. Recap
    FormGroup vs FormControl vs FormArray
    FormBuilder
    Validation
    Testing
    ValueChanges (rich API)
    Custom Form Controls

    View full-size slide