Sweet Angular, good forms never felt so good

Demo: https://github.com/cironunes/good-forms

Transcript

1. Hello, there!
2. Sweet Angular, good forms never seem so good
3. @cironunesdev
7. Fill
8. Fill React
9. Fill React Validate
10. Fill React Validate Submit
13. Template-driven
14. Template-driven Model-driven
 (reactive)
15. GIF HERE
16. GIF HERE
17. Template-driven
19. FormsModule
20. [(ngModel)] FormsModule
21. [(ngModel)] #tpl reference variables FormsModule
22. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ BrowserModule, FormsModule ] }) export class AppModule {}
24. model = { name: '' };
25. <form> <input type="text" name="name"> "#form> model = { name: '' };
26. <form> <input type="text" [(ngModel)]="model.name" name="name"> {{ model.name }} "#form> model = { name: '' };
27. <form> <input type=“text" [(ngModel)]="model.name" name="name" required #name="ngModel"> <div [hidden]="name.valid "$ name.pristine">Invalid!"#div> "#form>
28. abstractControl properties valid dirty invalid touched pending status disabled untouched enabled *statusChanges errors *valueChanges pristine path
29. abstractControl properties valid dirty invalid touched pending status disabled untouched enabled *statusChanges errors *valueChanges pristine path *: Observable
30. ngControlStatus CSS classes ng-valid ng-invalid ng-pending ng-pristine ng-dirty ng-untouched ng-touched
31. GIF HERE
32. GIF HERE
34. <form #heroForm="ngForm"> <button [disabled]="heroForm.invalid">
36. <form #heroForm="ngForm"> <button [disabled]="heroForm.invalid">
37. Model-driven
 (reactive)
39. ReactiveFormsModule
40. FormGroup, FormControl, FormArray, FormBuilder ReactiveFormsModule
41. FormGroup, FormControl, FormArray, FormBuilder ReactiveFormsModule reactive_directives
42. GIF HERE
43. GIF HERE
44. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule ] }) export class AppModule {}
45. constructor(private fb: FormBuilder) { this.heroForm = fb.group({ name: ['', [Validators.required, Validators.minLength(3)]], rival: [], superpowers: fb.group({ invisibility: false, fly: false, nightVision: false, healing: false }, { validator: superpowersValidator }), sex: [], skills: fb.group({ programming: 0, bjj: 0, fifa: 0 }), github: [] }); }
46. <input placeholder="Name *" formControlName="name"> <span *ngIf="heroForm.get('name').touched "& heroForm.get('name').hasError('required')" > Name is <strong>required"#strong> "#span>
47. <input placeholder="Name *" formControlName="name"> <span *ngIf="heroForm.get('name').touched "& heroForm.get('name').hasError('required')" > Name is <strong>required"#strong> "#span>
48. <input placeholder="Name *" formControlName="name"> <span *ngIf="heroForm.get('name').touched "& heroForm.get('name').hasError('required')" > Name is <strong>required"#strong> "#span>
49. <input placeholder="Name *" formControlName="name"> <span *ngIf="heroForm.get('name').touched "& heroForm.get('name').hasError('required')" > Name is <strong>required"#strong> "#span>
50. abstractControl methods #reset(value: any = undefined) #hasError(errorCode: string, path?: string[]): boolean #getError(errorCode: string, path?: string[]): any
52. this.name = (this.heroForm.get('name') as FormControl);
53. this.name = (this.heroForm.get('name') as FormControl); *ngIf="name.touched "& name.hasError('required')"
54. GIF HERE
55. GIF HERE
56. constructor(private fb: FormBuilder) { this.heroForm = fb.group({ name: ['', [Validators.required, Validators.minLength(3)]], rival: [], superpowers: fb.group({ invisibility: false, fly: false, nightVision: false, healing: false }, { validator: superpowersValidator }), sex: [], skills: fb.group({ programming: 0, bjj: 0, fifa: 0 }), github: [] }); }
57. constructor(private fb: FormBuilder) { this.heroForm = fb.group({ name: ['', [Validators.required, Validators.minLength(3)]], rival: [], superpowers: fb.group({ invisibility: false, fly: false, nightVision: false, healing: false }, { validator: superpowersValidator }), sex: [], skills: fb.group({ programming: 0, bjj: 0, fifa: 0 }), github: [] }); }
58. export const superpowersValidator = (control: AbstractControl) "' { const invisibility = control.get('invisibility'); const fly = control.get('fly'); const healing = control.get('healing'); const nightVision = control.get('nightVision'); const fields = [invisibility, fly, healing, nightVision] .filter(field "' field.value ""( true); if (fields.length < 2) { return { atleasttwo: true }; } return null; };
59. export const superpowersValidator = (control: AbstractControl) "' { const invisibility = control.get('invisibility'); const fly = control.get('fly'); const healing = control.get('healing'); const nightVision = control.get('nightVision'); const fields = [invisibility, fly, healing, nightVision] .filter(field "' field.value ""( true); if (fields.length < 2) { return { atleasttwo: true }; } return null; };
60. export const superpowersValidator = (control: AbstractControl) "' { const invisibility = control.get('invisibility'); const fly = control.get('fly'); const healing = control.get('healing'); const nightVision = control.get('nightVision'); const fields = [invisibility, fly, healing, nightVision] .filter(field "' field.value ""( true); if (fields.length < 2) { return { atleasttwo: true }; } return null; };
61. export const superpowersValidator = (control: AbstractControl) "' { const invisibility = control.get('invisibility'); const fly = control.get('fly'); const healing = control.get('healing'); const nightVision = control.get('nightVision'); const fields = [invisibility, fly, healing, nightVision] .filter(field "' field.value ""( true); if (fields.length < 2) { return { atleasttwo: true }; } return null; };
62. Custom controls
63. GIF HERE
64. GIF HERE
65. @Component({ selector: '…', templateUrl: '…', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() "' DistributorComponent), multi: true } ] }) export class DistributorComponent implements ControlValueAccessor {}
66. @Component({ selector: '…', templateUrl: '…', providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() "' DistributorComponent), multi: true } ] }) export class DistributorComponent implements ControlValueAccessor {}
67. points: number; writeValue(value: number): void { if (value "") undefined) { this.points = value; } } registerOnChange(fn: any): void { this.propagateChange = fn; } propagateChange = (_: any) "' {}; registerOnTouched(fn: any): void {} setDisabledState?(isDisabled: boolean): void {}
68. increment() { this.points += 1; this.propagateChange(this.points); this.update.emit(this.groupPoints - 1); } decrement() { this.points -= 1; this.propagateChange(this.points); this.update.emit(this.groupPoints + 1); }
69. increment() { this.points += 1; this.propagateChange(this.points); this.update.emit(this.groupPoints - 1); } decrement() { this.points -= 1; this.propagateChange(this.points); this.update.emit(this.groupPoints + 1); }
70. Template-driven
71. <app-distributor name="Programming" [(ngModel)]="hero.skills.programming" [groupPoints]="points" (update)="updatePoints($event)" >"#app-distributor>
72. updatePoints(points: number): void { this.points = points; }
73. Model-driven
 (reactive)
74. <app-distributor name="Programming" formControlName="programming" [groupPoints]="points" >"#app-distributor>
76. this.skills$ = this.skills .valueChanges .subscribe(skills "' { let sum = ""*; this.points = 10 - sum; });
77. this.skills$ = this.skills .valueChanges .subscribe(skills "' { let sum = ""*; this.points = 10 - sum; }); this.skills$.unsubscribe();
78. Not covered
79. Not covered Validators for custom controls
80. Async validators Not covered Validators for custom controls
81. Async validators Dynamic forms Not covered Validators for custom controls
82. T akeaways
83. T akeaways Pick up the one that works best for each situation
84. T akeaways Pick up the one that works best for each situation Reuse controls
85. T akeaways Pick up the one that works best for each situation Reuse controls Embrace Observables
86. github.com/cironunes/good-forms
87. Thanks! @cironunesdev