Introduction to Angular Forms
Wednesday December 6. 2017
Doug Corbett
[email protected]
Slide 2
Slide 2 text
Agenda
Very Brief Overview
1
Template-based Forms
3
Reactive Forms
4
Final Thoughts
5
Common Concerns
2
Slide 3
Slide 3 text
Very Brief Overview
Slide 4
Slide 4 text
We are going to discuss …
Slide 5
Slide 5 text
We are going to discuss …
Angular Forms
Slide 6
Slide 6 text
We are going to discuss …
Angular Forms
Assumptions: None really
Slide 7
Slide 7 text
Common Concerns
Slide 8
Slide 8 text
Purpose of Forms
• manipulate data
• validation
• enable controls based on validity
• feedback to the user
Slide 9
Slide 9 text
Common to Angular Forms
• Both rely on FormGroup and FormControl
• Both inherit from AbstractControl
• Can nest FormGroups
Slide 10
Slide 10 text
Form and Control States
• dirty / pristine
• touched / untouched
• valid
• errors collection
Field 1:
Field 2:
Field 3:
Cancel Save
Slide 11
Slide 11 text
Vocabulary
Form model – represents the html form, including controls, value, state, errors.
Not the same as the data model
Slide 12
Slide 12 text
Vocabulary
Data Model - Representation of the data to be saved or otherwise processed.
Slide 13
Slide 13 text
Model Diagram
HTML Form Model Data Model API/DB
Slide 14
Slide 14 text
Template-based Forms
Slide 15
Slide 15 text
Directives
FormsModule
• ngForm - access form model
• ngModel - two way binding
• ngModelGroup - grouping input elements within the form
Notes: Angular creates the form model for us in template driven forms.
Slide 16
Slide 16 text
Anatomy
Template - HTML that includes the following
• Form
• form controls
• data binding details
• validation
Component
• Properties for data binding
• supporting methods
Slide 17
Slide 17 text
Vocabulary
Template reference variable – a way to reference FormGroups and FormControls in the
HTML
Examples: #f="ngForm"
#inputVar="ngModel"
Slide 18
Slide 18 text
Vocabulary
Two-way data binding – how Angular binds model properties to a template.
Slide 19
Slide 19 text
HTML Form
Slide 20
Slide 20 text
Template Driven Form
Demo
Slide 21
Slide 21 text
What’s Missing ?
Slide 22
Slide 22 text
What’s Missing ?
Need to respond dynamically to user entered data.
Slide 23
Slide 23 text
What’s Missing ?
Need to respond dynamically to user entered data.
Dynamic validation based on user entry.
Slide 24
Slide 24 text
What’s Missing ?
Need to respond dynamically to user entered data.
Dynamic validation based on user entry.
Need to handle multiple child data dynamically.
Slide 25
Slide 25 text
What’s Missing ?
Need to respond dynamically to user entered data.
Dynamic validation based on user entry.
Need to handle multiple child data dynamically.
Easy Testability
Slide 26
Slide 26 text
Reactive Forms
Slide 27
Slide 27 text
Directives
ReactiveFormsModule
• formGroup - to bind the form element in the template to the root
formGroup element of the Form Model, tells Angular not to build its own
form model
• formControl
• formControlName - used to bind each input element to its associated form
control
• formGroupName
• formArrayName
Notes: We create the form model when using reactive forms.
Slide 28
Slide 28 text
Anatomy
Template - HTML that includes the following
• form
• form controls
• data binding details
Component
• create the form model
• Validation
• Properties for data binding
• supporting methods
Slide 29
Slide 29 text
Ways to access Form Model Properties
1. speakerForm.controls.firstName.valid
2. speakerForm.get('firstName').valid
3. firstName = new FormControl();
Slide 30
Slide 30 text
FormBuilder
FormBuilder is a class we can use to build a form model based on configuration.
It is a factory that creates formGroups, FormControls and FormArrays.
Slide 31
Slide 31 text
Validation
1. Built-in
• Validators.required
• Validators.pattern
• Validators.minLength(10)
2. Custom – Allow you to create your own custom rules, like “age must be
between 18 and 130.
3. Cross field – custom validation applied at the formGroup level possibly taking
into consideration two or more formControls contained within the formGroup.
Slide 32
Slide 32 text
Dynamic Validation
We can add or remove validation based on user actions.
mycontrol.clearValidators();
mycontrol.setValidators(Validators.required);
mycontrol.setValidators([ Validators.required, Validators.maxLength(30) ]);
mycontrol.updateValueAndValidity();
Slide 33
Slide 33 text
Dynamic Behavior
We can leverage observables
by listening to formControls’ valueChanged event.
by using the debounce function to provide a nicer user experience.
Slide 34
Slide 34 text
Dynamically duplicate elements on a form
We can encapsulate a group of formControls in a formGroup and create a formArray
of this formGroup.
Examples:
Addresses
Phone Numbers
Notes
Websites
etc.
And even these can be nested.
Slide 35
Slide 35 text
Vocabulary
Attribute binding – a way to assign html attributes values based on dynamic
values produced in Angular
Examples: attr.for="{{ 'title' + i }}"
Slide 36
Slide 36 text
Easier Testability
Encapsulating business logic in classes allows for easier testability. Reactive forms relies on class
components to define the form model and some business rules and it has access to the data
model. All of these elements can be tested directly. This is not so with template-based forms.
Demo
Slide 37
Slide 37 text
Final Thoughts
Slide 38
Slide 38 text
Final Thoughts
Both template-based and reactive forms allow us to build forms to manage application
data.
Slide 39
Slide 39 text
Final Thoughts
Both template-based and reactive forms allow us to build forms to manage application
data.
Template-based forms are easier to work with and will be familiar to Angular 1.x
developers.
Slide 40
Slide 40 text
Final Thoughts
Both template-based and reactive forms allow us to build forms to manage application
data.
Template-based forms are easier to work with and will be familiar to Angular 1.x
developers.
Depending on your needs, neither is considered better than the other … however
Slide 41
Slide 41 text
Final Thoughts
Both template-based and reactive forms allow us to build forms to manage application
data.
Template-based forms are easier to work with and will be familiar to Angular 1.x
developers.
Depending on your needs, neither is considered better than the other … however
Reactive forms provides all the power of template based forms and then some.
Slide 42
Slide 42 text
Reference Materials
Official Angular Documentation
https://angular.io/guide/forms
Angular 4 Front to Back – Brad Traversy
https://www.udemy.com/angular-4-front-to-back
Angular Reactive Forms
https://app.pluralsight.com/library/courses/angular-2-reactive-forms
ng-book – The Complete Book on Angular 4 – Nathan Murray and Ari Lerner
Event Demo code
https://github.com/dougcorbett/event-demo