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

Enrich your Angular Apps with Angular Forms

Enrich your Angular Apps with Angular Forms

In almost every Angular application you come to the point where you need information from the user. Angular Forms is a great solution for this. Angular Forms makes it possible to get rich information about the people interacting with the page and provides many possibilities with a large variety of forms. But user inputs, even in its obviously simplest form can get very complex: Fields must be validated, can have complex dependencies on each other, and should be testable. In this talk, Fabian Gosebrink will look at the complexity of Angular Forms and provide solutions that he encountered after maintaining lots of projects, web apps, and connected forms. The talk will look at the worst examples, complex validations, and the best solutions. Hopefully in your next projects, getting your user information will be easy, well testable and easy to implement.

Fabian Gosebrink

September 03, 2020
Tweet

More Decks by Fabian Gosebrink

Other Decks in Programming

Transcript

  1. Enrich your Angular
    Apps
    with
    Angular Forms

    View Slide

  2. Why?

    View Slide

  3. Template Forms
    Reactive Forms

    View Slide

  4. Template Forms
    Reactive Forms

    View 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

    View 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

    View Slide

  7. 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 Slide

  8. Abstract Control

    View Slide

  9. abstract class
    AbstractControl

    View Slide

  10. abstract class
    AbstractControl
    @angular/forms

    View Slide

  11. FormControl
    FormGroup
    FormArray

    View Slide

  12. FormControl

    View 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

    View 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

    View 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

    View Slide

  16. 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 Slide

  17. 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 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

    View Slide

  19. 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 Slide

  20. 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 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

    View 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

    View 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

    View 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

    View 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

    View Slide

  26. 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 Slide

  27. 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 Slide

  28. FormControl
    FormGroup
    FormArray

    View Slide

  29. FormControl
    FormGroup
    FormArray

    View Slide

  30. FormControl
    FormGroup
    FormArray

    View Slide

  31. FormGroup

    View Slide

  32. FormGroup
    Container for

    View Slide

  33. FormGroup
    Container for
    FormControls

    View Slide

  34. FormGroup
    Container for
    FormControls
    FormGroups

    View Slide

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

    View 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

    View 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

    View 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

    View Slide

  39. 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 Slide

  40. 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 Slide

  41. 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 Slide

  42. registerControl(
    addControl()
    removeControl()
    setControl()

    View Slide

  43. setValue()
    patchValue()
    reset()

    View Slide

  44. getRawValue(

    View Slide

  45. formGroup.getRawValue(

    View Slide

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

    View Slide

  47. formGroup.value

    View Slide

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

    View Slide

  49. 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 Slide


  50. Submit

    View Slide


  51. Submit

    Also enabled in pending state!

    View Slide


  52. Submit

    View Slide


  53. Submit

    Only enabled when valid

    View Slide

  54. Demo

    View Slide

  55. FormBuilder

    View Slide

  56. 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 Slide

  57. 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 Slide

  58. 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 Slide

  59. 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 Slide

  60. 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 Slide

  61. 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 Slide

  62. 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 Slide

  63. 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 Slide

  64. Demo

    View Slide

  65. FormControl
    FormGroup
    FormArray

    View Slide

  66. FormControl
    FormGroup
    FormArray

    View Slide

  67. FormArray
    Array of Form controls

    View Slide

  68. FormArray
    Array of Form controls
    Dynamic controls

    View Slide

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

    View Slide

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

    View Slide

  71. 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 Slide

  72. 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 Slide

  73. 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 Slide

  74. 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 Slide

  75. 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 Slide

  76. Demo

    View Slide

  77. 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 Slide

  78. 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 Slide

  79. 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 Slide

  80. 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 Slide

  81. 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 Slide

  82. 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 Slide

  83. 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 Slide

  84. Validation

    View Slide

  85. 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 Slide

  86. 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 Slide

  87. 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 Slide

  88. 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 Slide

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

    View Slide

  90. 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 | nu
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

    View Slide

  91. 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 Slide

  92. 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 Slide

  93. Custom Validation

    View Slide

  94. 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
    13
    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
    13

    View Slide

  95. 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
    13
    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
    13
    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
    13

    View Slide

  96. 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
    13
    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
    13
    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
    13
    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
    }
    13

    View Slide

  97. 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
    13
    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
    13
    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
    13
    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
    }
    13
    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
    }
    13

    View Slide

  98. 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
    13
    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
    13
    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
    13
    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
    }
    13
    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
    }
    13
    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
    }
    13

    View Slide

  99. 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
    13
    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
    13
    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
    13
    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
    }
    13
    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
    }
    13
    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
    }
    13
    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
    }
    13

    View Slide

  100. 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 Slide

  101. 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 Slide

  102. 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 Slide

  103. Async Validation

    View Slide

  104. Async Validation

    View Slide

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

    View Slide

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

    View Slide

  107. 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 Slide

  108. 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 Slide

  109. 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.myAsyncValidat
    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 Slide

  110. 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.myAsyncValidat
    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.myAsyncValidat
    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 Slide

  111. Cross Field
    Validation

    View Slide

  112. 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 Slide

  113. 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 Slide

  114. 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 Slide

  115. 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 Slide

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

    View Slide

  117. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms'
    export class MyFormValidator {
    static formValidator(/* ... */): ValidatorFn {
    return (formGroup: FormGroup) => {
    // 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: FormGroup) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    }
    9
    10

    View Slide

  118. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms'
    export class MyFormValidator {
    static formValidator(/* ... */): ValidatorFn {
    return (formGroup: FormGroup) => {
    // 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: FormGroup) => {
    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: FormGroup) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    9
    }
    10

    View Slide

  119. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms'
    export class MyFormValidator {
    static formValidator(/* ... */): ValidatorFn {
    return (formGroup: FormGroup) => {
    // 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: FormGroup) => {
    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: FormGroup) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    9
    }
    10
    return (formGroup: FormGroup) => {
    };
    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 Slide

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

    View Slide

  121. Cross Field Validation
    import { FormGroup, ValidatorFn } from '@angular/forms'
    export class MyFormValidator {
    static formValidator(value: any): ValidatorFn {
    return (formGroup: FormGroup) => {
    // 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: FormGroup) => {
    5
    // return null if everything is okay
    6
    // otherwise an object
    7
    };
    8
    }
    9
    }
    10

    View Slide

  122. 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 Slide

  123. 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 Slide

  124. 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 Slide

  125. Demo

    View Slide

  126. Testing

    View Slide

  127. 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(formContr
    expect(result.ageNotValid).toBe(true);
    });
    });
    });
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    View Slide

  128. 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(formContr
    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(formContr
    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 Slide

  129. 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(formContr
    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(formContr
    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(formContr
    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 Slide

  130. 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(formContr
    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(formContr
    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(formContr
    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(formContr
    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 Slide

  131. 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(formContr
    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(formContr
    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(formContr
    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(formContr
    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(formContr
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14

    View Slide

  132. 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(formContr
    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(formContr
    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(formContr
    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(formContr
    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(formContr
    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(formContr
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14

    View Slide

  133. 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(formContr
    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(formContr
    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(formContr
    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(formContr
    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(formContr
    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(formContr
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14
    const result = MyCustomValidator.myValidator(formContr
    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 Slide

  134. 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(formContr
    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(formContr
    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(formContr
    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(formContr
    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(formContr
    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(formContr
    9
    expect(result.ageNotValid).toBe(true);
    10
    });
    11
    12
    });
    13
    });
    14
    const result = MyCustomValidator.myValidator(formContr
    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(formContr
    9
    10
    });
    11
    12
    });
    13
    });
    14

    View Slide

  135. 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 Slide

  136. 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 Slide

  137. 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 Slide

  138. 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 Slide

  139. 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 Slide

  140. 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 Slide

  141. 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 Slide

  142. 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 Slide

  143. 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 Slide

  144. 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 Slide

  145. 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 Slide

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

    View Slide

  147. ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ...,
    lastName: ...,
    ...
    },
    {
    ...
    }
    );
    this.myForm.valueChanges.subscribe(console.log);
    this.myForm.get('firstName').valueChanges.subscribe(console.lo
    }
    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.lo
    14
    }
    15
    ValueChanges

    View Slide

  148. ngOnInit() {
    this.myForm = this.formBuilder.group(
    {
    firstName: ...,
    lastName: ...,
    ...
    },
    {
    ...
    }
    );
    this.myForm.valueChanges.subscribe(console.log);
    this.myForm.get('firstName').valueChanges.subscribe(console.lo
    }
    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.lo
    14
    }
    15
    this.myForm.get('firstName').valueChanges.subscribe(console.lo
    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 Slide

  149. Custom Form
    Controls

    View Slide

  150. Custom Form Controls





    1
    2
    3
    4
    5

    View Slide

  151. Control Value
    Accessor

    View Slide

  152. 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 Slide

  153. 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 Slide

  154. 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 Slide

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

    View Slide

  156. View Slide

  157. Stay safe!

    View Slide