Reactive forms in Angular

Build complex form in the simplest way with Angular
Find Google Slides @ https://bit.ly/devfest-amd-17

1. Reactive forms 5 November, 2017 GDG Ahmedabad DevFest Hardik Pithva @hardikpthv
2. Angular Forms Template-driven Forms Reactive Forms
3. Today’s objective Reactive Form Understanding Setup Implementation Quick demo
4. Reactive Forms A reactive style of programming Manipulation of form control objects in component class A tree of Angular form control objects ==> Native form control elements Avoiding use of ngModel, required, etc Easier and expressive • Reactive patterns • Testing • Validation
5. Bits & Pieces ReactiveFormsModule FormControl FormGroup FormArray FormBuilder Validators AbstractControl ControlValueAccessor DefaultValueAccessor NG_VALUE_ACCESSOR & so on
6. import { ReactiveFormsModule } from "@angular/forms"; @NgModule({ declarations: [...], imports: [ ... ReactiveFormsModule ], bootstrap: [...] }) export class AppModule { } Setup speakerdeck.com/hardikpthv/rise-with-angular app.module.ts npm install --save @angular/forms Terminal
7. Basic building blocks
8. FormGroup • Contains child (form) controls • Tracks value and validity • Can nest other FormGroups as well • Lets you add/remove/update controls new FormGroup(controls, validator?, asyncValidator?)
9. FormControl • A control or field of form • Corresponds with HTML form control • Watches value and validation status • Part of FormGroup new FormControl(formState?, validator?, asyncValidator?)
10. {} </> FormControl {} </> FormControl {} </> FormGroup First Name Last Name Form
11. register: FormGroup; ngOnInit() { this.register = new FormGroup({ firstName: new FormControl('Lizzy'), lastName: new FormControl('Bennett') }) } <form [formGroup]="register"> First : <input placeholder="First name" formControlName="firstName"> Last : <input placeholder="Last name" formControlName="lastName"> </form> HTML TypeScript
12. FormArray • Lets you create form field dynamically • Aggregates the values of each child FormControl • formArrayName directive value matches with FormArray ngOnInit() { this.register = new FormGroup({ ... address: new FormArray([ new FormControl(''), ]) }) } TypeScript
13. Basic building blocks ➔ FormGroup ➔ FormControl ➔ FormArray
14. Rationalizing further
15. FormBuilder • Helps in reducing duplication • Injected into the constructor • Syntactic sugar that shortens code • Easier to build up larger forms • Better readability
16. ngOnInit() { this.register = new FormGroup({ firstName: new FormControl('Lizzy'), lastName: new FormControl('Bennett'), address: new FormArray([...]) }) } Before constructor(private fb: FormBuilder) { } ngOnInit() { this.register = this.fb.group({ firstName: 'Lizzy', lastName: ['Bennett'], address: this.fb.array([...]) }) } After
17. Validators • Offers a bunch of validators • Implementation in component unlike template-driven forms • Custom validators • Async validators
18. ngOnInit() { this.register = this.fb.group({ firstName: ['', Validators.required], lastName: ['', [ Validators.required, Validators.pattern('[a-zA-Z]+'), Validators.maxLength(100), ]], }) } TypeScript
19. Custom form control
20. Simple use case • Create a control for RSVP form • E.g. Control name is Stepper ◦ Lets add/remove guest if one wants to bring
21. How to implement? • Create a component • Implement an interface a.k.a. ControlValueAccessor • Provide it to form control • Set default value if any
22. ControlValueAccessor • Bridge between Angular forms API and a native element • An interface consists of : ◦ writeValue(obj: any): void ◦ registerOnChange(fn: any): void ◦ registerOnTouched(fn: any): void ◦ setDisabledState(isDisabled: boolean)?: void
23. Demo < >
24. View @ online-edu.github.io/devfest
25. Community updates
26. Angular v5 is available! Build Optimizer Updates in : Forms Module Router Lifecycle Events Animation lib. Latest version of RxJS & so many medium.com/@hardikpthv/whats-new-in-angular-5-f6585a771917
27. What’s new in Form? • Validation and value updates on `blur` or on `submit` • Can have control at the Form Control / Form level new FormGroup(value); new FormControl( value, [], [myValidator] ) Before new FormGroup(value, { updateOn: 'blur'}); new FormControl(value, { updateOn: 'blur', asyncValidators: [myValidator] }) After
28. Thank You Hardik Pithva @hardikpthv @GDGAhmedabad @GoogleDevIndia
29. Get the content • Slides : bit.ly/devfest-amd-17 • Repo. : github.com/online-edu/devfest • VS Code Snippets for Material : bit.ly/ng-material-vscode