As presented in Codemotion Tel Aviv 2017 http://telaviv2017.codemotionworld.com

1. REACTIVE
FORMS
Nir Kaufman
Introduction to Angular

2. Nir Kaufman
Head of Angular department at 500Tech
Google Developer Expert
Worldwide speaker
Community activist
@nirkaufman

3. ANGULAR IL

4. ANGULAR SWAT

5. REACTIVE
FORMS
MODULE

6. @NgModule({
declarations: [AppComponent],
imports : [
BrowserModule,
ReactiveFormsModule
],
bootstrap : [AppComponent]
})

7. Form ControlForm Group Form Array
Abstract
Control

8. FormControl
Instance
FormControl
Directive
Form Element
( DOM )

9. MODEL
DRIVEN
FORMS

10. interface User {
name : string,
email: string,
active: boolean
phones: number[],
address: {
city: string,
street: string
zipCode: number
}
}
const userForm = new FormGroup({
name : new FormControl(),
email : new FormControl(),
active : new FormControl(),
phones : new FormArray([
new FormControl()
]),
address: new FormGroup({
city : new FormControl(),
street : new FormControl(),
zipCode: new FormControl()
})
})

11. interface User {
name : string,
email: string,
active: boolean
}
<form [formGroup]="userForm">
<input type="text"
placeholder="name"
formControlName="name">
<input type="text"
placeholder="email"
formControlName="email">
<input type="checkbox"
formControlName="active">
</form>

12. TRACK
CONTROL
STATE

13. <pre>
valid : {{ userForm.valid }}
invalid : {{ userForm.invalid }}
dirty : {{ userForm.dirty }}
pristine : {{ userForm.pristine }}
touched : {{ userForm.touched }}
untouched : {{ userForm.untouched }}
</pre>

15. VALIDATION

16. new FormControl(null, Validators.required)
<input type=“text"
required
placeholder="email"
class="form-control"
formControlName="email">

17. class CustomValidator {
static required(control: FormControl) {
if (control.value.length > 0) {
return null;
}
return { required: true };
}
}

18. TRACKING
STATUS

19. this.userForm.valueChanges
.subscribe(value => console.log(value))

20. this.userForm.valueChanges
.subscribe(value => console.log(value))

21. LIVE
CODING.{

22. MY TOOLS.

23. ng new reactive-form>

24. THE
CODE.github.com/angular-reactive-forms-book

25. THE
BOOK.leanpub.com/angular-forms

26. ME.
@nirkaufmannirkaufman@gmail.com