Slide 1

Slide 1 text

Reactive forms 5 November, 2017 GDG Ahmedabad DevFest Hardik Pithva @hardikpthv

Slide 2

Slide 2 text

Angular Forms Template-driven Forms Reactive Forms

Slide 3

Slide 3 text

Today’s objective Reactive Form Understanding Setup Implementation Quick demo

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Bits & Pieces ReactiveFormsModule FormControl FormGroup FormArray FormBuilder Validators AbstractControl ControlValueAccessor DefaultValueAccessor NG_VALUE_ACCESSOR & so on

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Basic building blocks

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

{} FormControl {} FormControl {} FormGroup First Name Last Name Form

Slide 11

Slide 11 text

register: FormGroup; ngOnInit() { this.register = new FormGroup({ firstName: new FormControl('Lizzy'), lastName: new FormControl('Bennett') }) } First : Last : HTML TypeScript

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Basic building blocks ➔ FormGroup ➔ FormControl ➔ FormArray

Slide 14

Slide 14 text

Rationalizing further

Slide 15

Slide 15 text

FormBuilder ● Helps in reducing duplication ● Injected into the constructor ● Syntactic sugar that shortens code ● Easier to build up larger forms ● Better readability

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Validators ● Offers a bunch of validators ● Implementation in component unlike template-driven forms ● Custom validators ● Async validators

Slide 18

Slide 18 text

ngOnInit() { this.register = this.fb.group({ firstName: ['', Validators.required], lastName: ['', [ Validators.required, Validators.pattern('[a-zA-Z]+'), Validators.maxLength(100), ]], }) } TypeScript

Slide 19

Slide 19 text

Custom form control

Slide 20

Slide 20 text

Simple use case ● Create a control for RSVP form ● E.g. Control name is Stepper ○ Lets add/remove guest if one wants to bring

Slide 21

Slide 21 text

How to implement? ● Create a component ● Implement an interface a.k.a. ControlValueAccessor ● Provide it to form control ● Set default value if any

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Demo < >

Slide 24

Slide 24 text

View @ online-edu.github.io/devfest

Slide 25

Slide 25 text

Community updates

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Thank You Hardik Pithva @hardikpthv @GDGAhmedabad @GoogleDevIndia

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content