Sweet Angular, good forms never felt so good

Transcript

1. Sweet Angular good forms, never felt so good
2. @cironunesdev
5. Fill
6. Fill React
7. Fill React Validate
8. Fill React Validate Submit
10. Template-driven
11. Template-driven Model-driven
 (reactive)
12. Template-driven
14. FormsModule
15. [(ngModel)] FormsModule
16. [(ngModel)] #tpl reference variables FormsModule
17. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ BrowserModule, FormsModule ] }) export class AppModule {}
19. model = { name: '' };
20. <form #heroForm="ngForm"> <input type="text" [(ngModel)]="model.name" name="name"> {{ model.name }} </form> model = { name: '' };
21. <form #heroForm="ngForm"> <input type="text" [(ngModel)]="model.name" name="name" #name="ngModel"> <div [hidden]="name.valid || name.pristine">Invalid! </div> </form>
22. Model-driven
 (reactive)
24. ReactiveFormsModule
25. FormGroup, FormControl, FormArray, FormBuilder ReactiveFormsModule
26. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule ] }) export class AppModule {}
27. 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: [] }); }
28. <div class="form-group form-group --big"> <input placeholder="Name *" formControlName="name"> <div *ngIf="heroForm.get('name').touched && heroForm.get('name').hasError('required')" > Name is <strong>required </strong> </div> <div *ngIf="heroForm.get('name').touched && heroForm.get('name').hasError('minlength')" > The min length for the name is <strong>3 </strong> </div> </div>
29. 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: [] }); }
30. 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; };
31. Not covered
32. Not covered Custom controls
33. Not covered Custom controls Async validators
34. Not covered Custom controls Async validators Dynamic forms
35. T akeaways
36. T akeaways Both styles can be used in the same app
37. T akeaways Both styles can be used in the same app Pick up the one that works the best for each situation
38. T akeaways Both styles can be used in the same app Pick up the one that works the best for each situation Embrace Observables
39. github.com/cironunes/good-forms
40. Thanks! @cironunesdev