What do we use forms for ?
• Get data from the user, serialize it and save it.
• Validate the data and show error messages.
• Populate data on initialization and display it.
Slide 4
Slide 4 text
What do we need ?
• Custom controls
• Custom validators
• Create controls dynamically
Slide 5
Slide 5 text
Forms Approaches
• Template-driven approach (Angular 1 style)
• Model-driven approach (Reactive, in component class)
Slide 6
Slide 6 text
Building Blocks
• FormControl
• FormGroup
• FormArray
Slide 7
Slide 7 text
Form Control
• Get the value of the input
• Input validation
• User interactions
• Value change
https://github.com/angular/angular/blob/master/modules/%40angular/
forms/src/directives/reactive_directives/form_control_directive.ts#L26
Slide 8
Slide 8 text
Form Group
Form Control Form Control
Form Control Form Control
Form Group
name name
name
name
Slide 9
Slide 9 text
Groups
• Validate formControls together
• Serialize formControl values together
Slide 10
Slide 10 text
Form Array
Form Control Form Control
Form Control Form Control
Form Array
0 2 3
1
Used to create dynamic forms of unknown length
FormsModule vs ReactiveFormsModule
• Implicit creation of FormControls
by directives
• Template as source of truth
• Async
• Explicit creation of FormControls
• Component class as source of
truth
• Sync
Slide 13
Slide 13 text
Reactive approach
Slide 14
Slide 14 text
Reactive approach
Slide 15
Slide 15 text
Reactive approach
Slide 16
Slide 16 text
Reactive approach
(using form builder)
Parent form group
Slide 17
Slide 17 text
Reactive approach
(using form builder and validators)
Slide 18
Slide 18 text
Reactive approach
(using nested form group)
Slide 19
Slide 19 text
Reactive approach
(using nested form group)
Slide 20
Slide 20 text
Populating data in reactive form
• form.setValue(...) - you assign every form control value at once
by passing in a data object whose properties exactly match the
form model behind the FormGroup.
• form.patchValue(...) - you can assign values to specific controls
in a FormGroup by supplying an object of key/value pairs for just
the controls of interest. (cannot check for missing control values)
Slide 21
Slide 21 text
Resetting the form
• form.reset({...}) - restores all flags to the pristine. The method
also takes optional state value so you can reset the flags and the
control values at the same.
Internally, reset passes the argument to setValue
Slide 22
Slide 22 text
FormArray template
Slide 23
Slide 23 text
FormArray
Slide 24
Slide 24 text
FormArray class (1)
Slide 25
Slide 25 text
FormArray class (2)
Slide 26
Slide 26 text
Demo
Slide 27
Slide 27 text
Template-driven approach
Slide 28
Slide 28 text
Template-driven approach
Slide 29
Slide 29 text
NgModel
[(NgModel)] = [ngModel] + (ngModelChange)
Slide 30
Slide 30 text
Two way data binding - NgModel
Slide 31
Slide 31 text
Two way data binding
Slide 32
Slide 32 text
NgModel
• Use to track control state and validity
• The directive doesn't just track state. It updates the control with
special Angular CSS classes that reflect the state.