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
3. Template Forms Reactive Forms
4. Template Forms Reactive Forms
5. Why?
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
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
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
9. Abstract Control
10. abstract class AbstractControl
11. @angular/forms abstract class AbstractControl
12. FormControl FormGroup FormArray
13. FormControl
14. FormControl import { Component } from '@angular/core'; import { FormControl } from '@angular/forms' @Component({ selector: 'my-app', template: `<input [formControl]="name">`, }) export class AppComponent { name = new FormControl(); } 1 2 3 4 5 6 7 8 9 10
15. FormControl import { Component } from '@angular/core'; import { FormControl } from '@angular/forms' @Component({ selector: 'my-app', template: `<input [formControl]="name">`, }) 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: `<input [formControl]="name">`, 6 }) 7 export class AppComponent { 8 name = new FormControl(); 9 } 10
16. FormControl import { Component } from '@angular/core'; import { FormControl } from '@angular/forms' @Component({ selector: 'my-app', template: `<input [formControl]="name">`, }) 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: `<input [formControl]="name">`, 6 }) 7 export class AppComponent { 8 name = new FormControl(); 9 } 10 template: `<input [formControl]="name">`, 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
17. FormControl import { Component } from '@angular/core'; import { FormControl } from '@angular/forms' @Component({ selector: 'my-app', template: `<input [formControl]="name">`, }) 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: `<input [formControl]="name">`, 6 }) 7 export class AppComponent { 8 name = new FormControl(); 9 } 10 template: `<input [formControl]="name">`, 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: `<input [formControl]="name">`, 6 }) 7 export class AppComponent { 8 9 } 10
18. FormControl import { Component } from '@angular/core'; import { FormControl } from '@angular/forms' @Component({ selector: 'my-app', template: `<input [formControl]="name">`, }) 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: `<input [formControl]="name">`, 6 }) 7 export class AppComponent { 8 name = new FormControl(); 9 } 10 template: `<input [formControl]="name">`, 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: `<input [formControl]="name">`, 6 }) 7 export class AppComponent { 8 9 } 10 template: `<input [formControl]="name">`, 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
19. FormControl import { Component } from '@angular/core'; import { FormControl } from '@angular/forms' @Component({ selector: 'my-app', template: ` <input [formControl]="name"> {{ 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
20. FormControl import { Component } from '@angular/core'; import { FormControl } from '@angular/forms' @Component({ selector: 'my-app', template: ` <input [formControl]="name"> {{ 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 <input [formControl]="name"> 7 8 9 10 `, 11 }) 12 export class AppComponent { 13 name = new FormControl(); 14 } 15
21. FormControl import { Component } from '@angular/core'; import { FormControl } from '@angular/forms' @Component({ selector: 'my-app', template: ` <input [formControl]="name"> {{ 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 <input [formControl]="name"> 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 <input [formControl]="name"> 7 8 9 10 `, 11 }) 12 export class AppComponent { 13 14 } 15
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<any> 13 statusChanges: Observable<any> 14
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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 14
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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 14
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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 14
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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 14
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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 14
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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 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<any> 13 statusChanges: Observable<any> 14 valueChanges: Observable<any> statusChanges: Observable<any> 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
29. FormControl FormGroup FormArray
30. FormControl FormGroup FormArray
31. FormControl FormGroup FormArray
32. FormGroup
33. FormGroup Container for
34. FormGroup Container for FormControls
35. FormGroup Container for FormControls FormGroups
36. FormGroup [Object object] { ... }
37. import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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
38. import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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
39. import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> import { Component } from '@angular/core'; 1 import { FormControl, FormGroup } from '@angular/forms' 2 3 @Component({ 4 selector: 'my-app', 5 template: ` 6 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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
40. import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> import { Component } from '@angular/core'; 1 import { FormControl, FormGroup } from '@angular/forms' 2 3 @Component({ 4 selector: 'my-app', 5 template: ` 6 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <input formControlName="firstName"> import { Component } from '@angular/core'; 1 import { FormControl, FormGroup } from '@angular/forms' 2 3 @Component({ 4 selector: 'my-app', 5 template: ` 6 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 8 <button>Send</button> 9 </form> 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
41. import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> import { Component } from '@angular/core'; 1 import { FormControl, FormGroup } from '@angular/forms' 2 3 @Component({ 4 selector: 'my-app', 5 template: ` 6 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <input formControlName="firstName"> import { Component } from '@angular/core'; 1 import { FormControl, FormGroup } from '@angular/forms' 2 3 @Component({ 4 selector: 'my-app', 5 template: ` 6 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 10 ` 11 }) 12 export class AppComponent { 13 14 15 16 17 onSubmit() { 18 console.log(this.myFormGroup.get("firstName")) 19 } 20 } 21
42. import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> import { Component } from '@angular/core'; 1 import { FormControl, FormGroup } from '@angular/forms' 2 3 @Component({ 4 selector: 'my-app', 5 template: ` 6 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <input formControlName="firstName"> import { Component } from '@angular/core'; 1 import { FormControl, FormGroup } from '@angular/forms' 2 3 @Component({ 4 selector: 'my-app', 5 template: ` 6 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 10 ` 11 }) 12 export class AppComponent { 13 myFormGroup = new FormGroup({ 14 firstName: new FormControl() 15 }); 16 17 18 19 20 } 21
43. registerControl() addControl() removeControl() setControl()
44. setValue() patchValue() reset()
45. getRawValue()
46. formGroup.getRawValue()
47. formGroup.getRawValue() { "firstName" : "Obi Wan", "lastName" : "Kenobi" } 1 2 3 4
48. formGroup.value
49. formGroup.value { "firstName" : "Obi Wan" } 1 2 3
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<any> statusChanges: Observable<any>
51. <button [disabled]="myForm.invalid"> Submit </button>
52. <button [disabled]="myForm.invalid"> Submit </button> Also enabled in pending state!
53. <button [disabled]="!myForm.valid"> Submit </button>
54. <button [disabled]="!myForm.valid"> Submit </button> Only enabled when valid
55. FormBuilder
56. FormBuilder import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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
57. import { Component } from '@angular/core'; import { FormControl, FormGroup, FormBuilder } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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
58. import { Component } from '@angular/core'; import { FormControl, FormGroup, FormBuilder } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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
59. import { Component } from '@angular/core'; import { FormControl, FormGroup, FormBuilder } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> 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
60. import { Component } from '@angular/core'; import { FormControl, FormGroup, FormBuilder } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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
61. import { Component } from '@angular/core'; import { FormControl, FormGroup, FormBuilder } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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
62. import { Component } from '@angular/core'; import { FormControl, FormGroup, FormBuilder } from '@angular/forms' @Component({ selector: 'my-app', template: ` <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> <input formControlName="firstName"> <button>Send</button> </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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 <form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()"> 7 <input formControlName="firstName"> 8 <button>Send</button> 9 </form> 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
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
64. FormControl FormGroup FormArray
65. FormControl FormGroup FormArray
66. FormArray Array of Form controls
67. FormArray Array of Form controls Dynamic controls
68. FormArray Array of Form controls Iterating over controls Dynamic controls
69. FormArray Array of Form controls Iterating over controls Dynamic controls Serialized as array
70. FormArray import { Component } from "@angular/core"; import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myFormGroup"> <div formArrayName="myFormArray"> <input *ngFor="let control of formArray.controls; index as i" [formControlName]="i" /> </div> <button>Send</button> </form> ` }) 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
71. FormArray import { Component } from "@angular/core"; import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myFormGroup"> <div formArrayName="myFormArray"> <input *ngFor="let control of formArray.controls; index as i" [formControlName]="i" /> </div> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup"> 7 <div formArrayName="myFormArray"> 8 <input *ngFor="let control of formArray.controls; index as i" 9 [formControlName]="i" /> 10 </div> 11 <button>Send</button> 12 </form> 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
72. FormArray import { Component } from "@angular/core"; import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myFormGroup"> <div formArrayName="myFormArray"> <input *ngFor="let control of formArray.controls; index as i" [formControlName]="i" /> </div> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup"> 7 <div formArrayName="myFormArray"> 8 <input *ngFor="let control of formArray.controls; index as i" 9 [formControlName]="i" /> 10 </div> 11 <button>Send</button> 12 </form> 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 <form [formGroup]="myFormGroup"> 7 <div formArrayName="myFormArray"> 8 <input *ngFor="let control of formArray.controls; index as i" 9 [formControlName]="i" /> 10 </div> 11 <button>Send</button> 12 </form> 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
73. FormArray import { Component } from "@angular/core"; import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myFormGroup"> <div formArrayName="myFormArray"> <input *ngFor="let control of formArray.controls; index as i" [formControlName]="i" /> </div> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup"> 7 <div formArrayName="myFormArray"> 8 <input *ngFor="let control of formArray.controls; index as i" 9 [formControlName]="i" /> 10 </div> 11 <button>Send</button> 12 </form> 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 <form [formGroup]="myFormGroup"> 7 <div formArrayName="myFormArray"> 8 <input *ngFor="let control of formArray.controls; index as i" 9 [formControlName]="i" /> 10 </div> 11 <button>Send</button> 12 </form> 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 <form [formGroup]="myFormGroup"> 7 <div formArrayName="myFormArray"> 8 <input *ngFor="let control of formArray.controls; index as i" 9 [formControlName]="i" /> 10 </div> 11 <button>Send</button> 12 </form> 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
74. FormArray import { Component } from "@angular/core"; import { FormControl, FormArray, FormGroup, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myFormGroup"> <div formArrayName="myFormArray"> <input *ngFor="let control of formArray.controls; index as i" [formControlName]="i" /> </div> <button>Send</button> </form> ` }) 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 <form [formGroup]="myFormGroup"> 7 <div formArrayName="myFormArray"> 8 <input *ngFor="let control of formArray.controls; index as i" 9 [formControlName]="i" /> 10 </div> 11 <button>Send</button> 12 </form> 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 <form [formGroup]="myFormGroup"> 7 <div formArrayName="myFormArray"> 8 <input *ngFor="let control of formArray.controls; index as i" 9 [formControlName]="i" /> 10 </div> 11 <button>Send</button> 12 </form> 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 <form [formGroup]="myFormGroup"> 7 <div formArrayName="myFormArray"> 8 <input *ngFor="let control of formArray.controls; index as i" 9 [formControlName]="i" /> 10 </div> 11 <button>Send</button> 12 </form> 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 <form [formGroup]="myFormGroup"> <div formArrayName="myFormArray"> <input *ngFor="let control of formArray.controls; index as i" [formControlName]="i" /> </div> <button>Send</button> </form> 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
75. FormArray import { Component } from "@angular/core"; import { FormArray, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div *ngFor="let formGroup of formArray.controls; index as i"> <my-comp [formGroup]="formGroup"></my-comp> </div> </form> ` }) 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
76. FormArray import { Component } from "@angular/core"; import { FormArray, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div *ngFor="let formGroup of formArray.controls; index as i"> <my-comp [formGroup]="formGroup"></my-comp> </div> </form> ` }) 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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
77. FormArray import { Component } from "@angular/core"; import { FormArray, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div *ngFor="let formGroup of formArray.controls; index as i"> <my-comp [formGroup]="formGroup"></my-comp> </div> </form> ` }) 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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
78. FormArray import { Component } from "@angular/core"; import { FormArray, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div *ngFor="let formGroup of formArray.controls; index as i"> <my-comp [formGroup]="formGroup"></my-comp> </div> </form> ` }) 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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
79. FormArray import { Component } from "@angular/core"; import { FormArray, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div *ngFor="let formGroup of formArray.controls; index as i"> <my-comp [formGroup]="formGroup"></my-comp> </div> </form> ` }) 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> </form> import { Component } from "@angular/core"; 1 import { FormArray, FormBuilder } from "@angular/forms"; 2 3 @Component({ 4 selector: "my-app", 5 template: ` 6 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 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
80. FormArray import { Component } from "@angular/core"; import { FormArray, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div *ngFor="let formGroup of formArray.controls; index as i"> <my-comp [formGroup]="formGroup"></my-comp> </div> </form> ` }) 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> </form> import { Component } from "@angular/core"; 1 import { FormArray, FormBuilder } from "@angular/forms"; 2 3 @Component({ 4 selector: "my-app", 5 template: ` 6 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 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 <div *ngFor="let formGroup of formArray.controls; index as i"> </div> import { Component } from "@angular/core"; 1 import { FormArray, FormBuilder } from "@angular/forms"; 2 3 @Component({ 4 selector: "my-app", 5 template: ` 6 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 8 <my-comp [formGroup]="formGroup"></my-comp> 9 10 </form> 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
81. FormArray import { Component } from "@angular/core"; import { FormArray, FormBuilder } from "@angular/forms"; @Component({ selector: "my-app", template: ` <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <div *ngFor="let formGroup of formArray.controls; index as i"> <my-comp [formGroup]="formGroup"></my-comp> </div> </form> ` }) 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 10 </form> 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 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> </form> import { Component } from "@angular/core"; 1 import { FormArray, FormBuilder } from "@angular/forms"; 2 3 @Component({ 4 selector: "my-app", 5 template: ` 6 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 <my-comp [formGroup]="formGroup"></my-comp> 9 </div> 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 <div *ngFor="let formGroup of formArray.controls; index as i"> </div> import { Component } from "@angular/core"; 1 import { FormArray, FormBuilder } from "@angular/forms"; 2 3 @Component({ 4 selector: "my-app", 5 template: ` 6 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 8 <my-comp [formGroup]="formGroup"></my-comp> 9 10 </form> 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 <my-comp [formGroup]="formGroup"></my-comp> import { Component } from "@angular/core"; 1 import { FormArray, FormBuilder } from "@angular/forms"; 2 3 @Component({ 4 selector: "my-app", 5 template: ` 6 <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 7 <div *ngFor="let formGroup of formArray.controls; index as i"> 8 9 </div> 10 </form> 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
82. Validation
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
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
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
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
87. Validation class Validators { static required(control: AbstractControl): ValidationErrors | null } 1 2 3 4 5 6 7 8 9 10 11 12 13
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
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
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
91. Custom Validation
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
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
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
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
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
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
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
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
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
101. Async Validation
102. Async Validation
103. Async Validation import { AbstractControl } from '@angular/forms'; export class MyCustomValidator { static myAsyncValidator(control: AbstractControl) : Observable<any> { // ... } } 1 2 3 4 5 6 7 8 9 10 import { AbstractControl } from '@angular/forms'; export class MyCustomValidator { static myAsyncValidator(control: AbstractControl) : Observable<any> { // ... } } 1 2 3 4 5 6 7 8 9 10
104. Async Validation import { AbstractControl } from '@angular/forms'; export class MyCustomValidator { static myAsyncValidator(control: AbstractControl) : Observable<any> { // ... } } 1 2 3 4 5 6 7 8 9 10 import { AbstractControl } from '@angular/forms'; export class MyCustomValidator { static myAsyncValidator(control: AbstractControl) : Observable<any> { // ... } } 1 2 3 4 5 6 7 8 9 10 static myAsyncValidator(control: AbstractControl) : Observable<any> { import { AbstractControl } from '@angular/forms'; 1 2 export class MyCustomValidator { 3 4 5 6 // ... 7 } 8 9 } 10
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
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
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
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
109. Cross Field Validation
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
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
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
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
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
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
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
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
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
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
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
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
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
123. Testing
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
146. Custom Form Controls
147. Custom Form Controls <form [formGroup]="myForm"> <!-- ... --> <app-block-buttons formControlName="toggle"></app-block-buttons> <!-- ... --> </form> 1 2 3 4 5
148. Control Value Accessor
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
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
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
152. Recap FormGroup vs FormControl vs FormArray FormBuilder Validation Testing ValueChanges (rich API) Custom Form Controls
153. Stay safe!