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.

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