Angular Reactive Forms Developing Forms and Validation with Angular

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

Transcript

1. Angular Reactive
   Forms
   Developing Forms and
   Validation with Angular
   

   View Slide

2. View Slide

3. Template Forms
   Reactive Forms
   

   View Slide

4. Template Forms
   Reactive Forms
   

   View Slide

5. Why?
   

   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
   

   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
   

   View Slide

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

9. Abstract Control
   

   View Slide

10. abstract class AbstractControl
    

    View Slide

11. @angular/forms
    abstract class AbstractControl
    

    View Slide

12. FormControl
    FormGroup
    FormArray
    

    View Slide

13. FormControl
    

    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
    

    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
    

    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
    

    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
    

    View Slide

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

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
    

    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
    

    View Slide

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

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
    

    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
    

    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
    

    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
    

    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
    

    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
    

    View Slide

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

29. FormControl
    FormGroup
    FormArray
    

    View Slide

30. FormControl
    FormGroup
    FormArray
    

    View Slide

31. FormControl
    FormGroup
    FormArray
    

    View Slide

32. FormGroup
    

    View Slide

33. FormGroup
    Container for
    

    View Slide

34. FormGroup
    Container for
    FormControls
    

    View Slide

35. FormGroup
    Container for
    FormControls
    FormGroups
    

    View Slide

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

    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
    

    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
    

    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
    

    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
    

    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
    

    View Slide

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

43. registerControl()
    addControl()
    removeControl()
    setControl()
    

    View Slide

44. setValue()
    patchValue()
    reset()
    

    View Slide

45. getRawValue()
    

    View Slide

46. formGroup.getRawValue()
    

    View Slide

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

    View Slide

48. formGroup.value
    

    View Slide

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

    View Slide

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

51. 
    Submit
    
    

    View Slide

52. 
    Submit
    
    Also enabled in pending state!
    

    View Slide

53. 
    Submit
    
    

    View Slide

54. 
    Submit
    
    Only enabled when valid
    

    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. FormControl
    FormGroup
    FormArray
    

    View Slide

65. FormControl
    FormGroup
    FormArray
    

    View Slide

66. FormArray
    Array of Form controls
    

    View Slide

67. FormArray
    Array of Form controls
    Dynamic controls
    

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

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
    
    
    [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

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

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

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

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

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

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

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

82. Validation
    

    View Slide

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

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

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

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

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

    View Slide

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

    View Slide

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

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

91. Custom Validation
    

    View Slide

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

    View Slide

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

    View 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
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    }
    12
    

    View 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
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    }
    12
    static myValidator(control: AbstractControl) {
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    if (control.value ... ) {
    6
    return { someProp: true };
    7
    }
    8
    9
    return null;
    10
    }
    11
    }
    12
    

    View 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
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    }
    12
    static myValidator(control: AbstractControl) {
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    if (control.value ... ) {
    6
    return { someProp: true };
    7
    }
    8
    9
    return null;
    10
    }
    11
    }
    12
    if (control.value ... ) {
    return { someProp: true };
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    static myValidator(control: AbstractControl) {
    5
    6
    7
    8
    9
    return null;
    10
    }
    11
    }
    12
    

    View 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
    import { AbstractControl } from '@angular/forms';
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    export class MyCustomValidator {
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    static myValidator(control: AbstractControl) {
    if (control.value ... ) {
    return { someProp: true };
    }
    return null;
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    6
    7
    8
    9
    10
    11
    }
    12
    static myValidator(control: AbstractControl) {
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    5
    if (control.value ... ) {
    6
    return { someProp: true };
    7
    }
    8
    9
    return null;
    10
    }
    11
    }
    12
    if (control.value ... ) {
    return { someProp: true };
    }
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    static myValidator(control: AbstractControl) {
    5
    6
    7
    8
    9
    return null;
    10
    }
    11
    }
    12
    return null;
    import { AbstractControl } from '@angular/forms';
    1
    2
    export class MyCustomValidator {
    3
    4
    static myValidator(control: AbstractControl) {
    5
    if (control.value ... ) {
    6
    return { someProp: true };
    7
    }
    8
    9
    10
    }
    11
    }
    12
    

    View Slide

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

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

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

101. Async Validation
     

     View Slide

102. Async Validation
     

     View Slide

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

     View Slide

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

     View Slide

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

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

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.myAsyncValidator]],
     age: ['', Validators.required],
     room: [null, Validators.required],
     }
     );
     }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     

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

     View Slide

109. Cross Field
     Validation
     

     View Slide

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

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

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],
     },
     {
     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

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],
     },
     {
     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

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

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

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

123. Testing
     

     View Slide

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

     View Slide

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

     View Slide

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

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

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

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

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

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

     View Slide

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

     View Slide

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

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

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

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

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

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

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);
     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

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);
     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

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);
     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

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

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

     View Slide

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

     View Slide

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

     View Slide

146. Custom Form
     Controls
     

     View Slide

147. Custom Form Controls
     
     
     
     
     
     1
     2
     3
     4
     5
     

     View Slide

148. Control Value
     Accessor
     

     View Slide

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

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

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

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

     View Slide

153. Stay safe!
     

     View Slide