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