<form onsubmit="send()"> <input type="text" required> </form>
REACTIVE FORMS Nir Kaufman Unleash the power of Angular’s
Nir Kaufman Google Developer Expert Head of Angular at 500Tech Worldwide speaker Community leader @nirkaufman
ANGULAR FORMS
FORMS ARE COMPLICATED
Abstract Control
FormControl Abstract Control
FormControlFormGroup FormArray Abstract Control
GET STARTED
@NgModule({ declarations: [AppComponent], imports : [ BrowserModule, ReactiveFormsModule ], bootstrap : [AppComponent] })
MODEL DRIVEN LIVE CODING
export interface JsHero { name: string; age: number; canCode: boolean; skills: number; }
this.heroForm = fb.group({ name: null, age: null, canCode: false, skills: 0, })
FORM ELEMENTS
FormControl Instance FormControl Directive Form Element (DOM) LIVE CODING
ADDING VALIDATIONS
JUST A FUNCTION
control => null | { } LIVE CODING
TRACKING STATE
abstract class AbstractControl { readonly value: any; readonly status: string; readonly valid: boolean; readonly invalid: boolean; readonly pending: boolean; ……… } LIVE CODING
ADDING STYLE LIVE CODING
FINAL WORDS
ANGULAR FORMS
YOU ANGULAR
ANGULAR YOU
YOU FORMS
NEXT STEPS
THE CODE.github.com/angular-reactive-forms-book
THE BOOK. leanpub.com/angular-forms/c/cluj
ME. @nirkaufmannirkaufman@gmail.com
Introduction To Angular's reactive forms

Introduction To Angular's reactive forms