Angular 4
Lesson 10—Forms
© Simplilearn. All rights reserved.
Learning Objectives
By the end of this lesson, you should be able to:
Describe Angular Form benefits
Explain Template-Driven Form Approach
Explain Model-Driven Form Approach
Discuss Angular Form Validation
Forms
Topic 1—Angular Form Benefits
Angular Form Benefits
A form creates a cohesive, effective, and compelling data entry experience.
An Angular form coordinates a set of data-bound user controls, tracks changes, validates input,
and presents errors.
Forms are probably the most crucial aspect of your web application.
You can often get events by clicking on links or moving the mouse, but it’s through forms that you get
the majority of your rich data input from users.
Angular Form—Challenges
The form challenges in Angular are listed below:
Form inputs are meant to modify data, Changes often need to be reflected
both on the page and the server. elsewhere on the page.
Users have a lot of leeway in what they You need to be able to test your forms
enter, so you need to validate values. without relying on DOM selectors.
Dependent fields can have The UI needs to clearly state
complex logic. expectations and errors, if any.
Angular Form—Tools
Angular has these tools to help with all the challenges.
FormControls Validators Observers
• Encapsulate the • Give you the ability • Allow you to watch
inputs in your forms to validate inputs, your form for
and give objects to any way you like changes and respond
work with them accordingly
Angular Form—FormControl
Angular FormControl comes in two forms: Control and ControlGroup.
Control Control Group
A Control is one of the A ControlGroup can define all
fundamental building blocks or part of a form; it
used to define forms in aggregates many Controls. A
Angular; however, it cannot be ControlArray resembles a
divided into other Controls. ControlGroup and can also
aggregate Controls.
Angular Form—AbstractControl
ControlGroup and Control extend from the same abstract class, which means that these
are in AbstractControl and refer to each other using this same abstract class.
AbstractControl
ControlGroup Control
AbstractControl gives you enough flexibility to match any HTML form structure.
These building blocks play an important role in the structure.
Angular Form—Control Class
Control class represents a single input field in the form.
First Name
Control
By default, a Control is created for every <input> or other form component.
You can bind an existing Control to a DOM element using directives such
as NgFormControl and NgControlName.
Angular Form—Control Class (Contd.)
Using Control class, you can access other properties too.
First Name
Control
• value
• touched
• untouched
• dirty
• pristine
• valid
• errors
Angular Form—ControlGroup
Most forms have more than one field, so you need a way to manage multiple Controls.
If you want to check the validity of your form, it’s cumbersome to iterate over an array of
Controls and check each Control for validity.
First Name
Control
Comment
ControlGroups solve this issue by providing a wrapper interface around a collection of Controls.
Angular Form—ControlGroup (Contd.)
ControlGroup can have multiple controls.
First Name
Control
Control
Comment
Control
Angular Form—Validator
Validators are provided by the Validators module. The simplest validator is “required,” which
simply says that the designated field is required or the Control will be considered invalid.
To use validators, you need to do two things:
01 Assign a validator to the Control object
02 Check the status of the validator in the view and take action accordingly
Angular Form—Observer
Observers allow you to watch your form for changes and respond accordingly.
In an imperative way, a variable is only changed when its state is mutated by
assigning a new or updated value.
Observers design patterns:
01 Subject tracks the Observer
02 Subject notifies observers of state changes
Forms
Topic 2—Template-Driven Approach
Template-Driven Approach
With template-driven forms, you can essentially leave a component class empty until you
need to read/write values (such as submitting and setting initial or future data).
>_ training@localhost:~
Import {component} from ‘@angular/core’ l;
@Component ({
selector: ‘signup - form’,
template: ‘
<form novalidate>…</form>
‘
})
export class signupFormComponent {
constructor()_ {}
}
Template-Driven Approach—Advantages and Disadvantages
Advantage Disadvantage
The upside of this way of On the downside, the form
handling forms is its validation logic cannot be unit
simplicity, and it is probably tested. The only way to test
more than enough to build this logic is to run an end-to-
a large range of forms. end test with a browser, for
example, using a headless
browser like PhantomJS.
Demo—Template-Driven Approach
START LAB
Forms
Topic 3—Angular Validation
Angular Validation
Angular comes with two types of validation:
Built-in form validation Custom form validation
Angular Validation (Contd.)
Built-in form validation
Angular provides three out-of-the-box validators that can either be applied using
the “Control” Class, or using HTML properties.
For example: <input required> will automatically apply the required validator
• Required
• minLength
• maxLength
Apply them to the Control using the second parameter.
this.name = new Control('', Validators.minLength(4));
Angular Validation (Contd.)
Custom form validation
You can also write your own custom validators. Here is an example of a validator
that checks if the first character is not a number:
Interface ValidationResult {
[key:string] :boolean;
}
class UsernameValidator {
static startWithNumber (control: Control) :ValidationResult {
if ( control.value ! “” && !isNaN
(control.valuel.charAt(0)) ) {
}
return null;
}
}
Demo—Validation
START LAB
Forms
Topic 4—Model-Driven Approach
Model-Driven Approach
A lot of features and concerns were improved in Angular, such as communication
between components, code-reuse, separation of concerns, unit tests, and others.
To promote some of those benefits in the context of forms, Angular uses a “model-
driven” or reactive technique of development.
Model-Driven Approach—Benefits
Model-Driven approach (Reactive Forms) refers to a strategy of building your own
Model object (FormGroup and related items) and binding it to Component HTML.
It's implied in a more concise HTML Template and provides more control
in your forms (but with more code on it).
The same FormGroup object that is automatically created and associated
with the form can be created manually using ReactiveForms.
Model-Driven Approach—Front-end
>_
training@localhost:~
<form [ngFormModel]=‘form’ (ngSubmit)=“onSubmit()”>
<div class=“form-group” [ngclass]=“{‘has-error’: !name.valid}”>
<label for=“name”>Name</label>
<input type=“text” class=“form-control” id=“name”
ngcontrol=‘name’
#name=“ngForm”>
<p *ngIf=“!name.valid” class=“help-block”>
Name is required
</p>
</div>
<button type=“submit” class=“btn btn-primary”
[disabled]=“!form.valid”>Add user</button>
</form>
Model-Driven Approach—Component
>_
training@localhost:~
import {Component} from ‘angular2/core’;
import {Control, ControlGroup, Validators} from ‘angular2/common’;
@Component({
selector: ‘form’,
templateUrl: ‘./dev/shared/form.component.html’
})
Export class FormComponent {
form = new ControlGroup({
name: new Control(‘’, Validators.required);
});
onSubmit(){
console.log(this.form.value);
}
}
Model-Driven Approach—FormBuilder
You can create an AbstractControl from a user-specified configuration.
It is essentially syntactic sugar that shortens the new FormGroup(), new
FormControl(), and new FormArray() boilerplate that can build up in larger forms.
Angular has a new helper Class called FormBuilder.
FormBuilder allows you to explicitly declare forms in your components. This
also allows you to explicitly list each form control’s validators.
Advantages of Model-Driven Forms
You can now unit test the form validation logic.
This can be done by just instantiating the class, setting some values in the form
controls, and performing assertions against the form global valid state and the
validity state of each control.
The FormGroup and FormControl classes provide an API that allows you to build
UIs using a completely different programming style known as Functional Reactive
Programming.
Demo—Model-Driven Approach
START LAB
Key Takeaways
Angular aims to make the creation and validation of forms simple, intuitive,
and manageable.
Template-Driven approach was the typical way to build forms in the past,
and it is still useful for building very simple forms in Angular.
Angular comes with a brand new approach to forms that makes it easier to
construct and apply validation to them.
Model-driven approach (reactive forms), while similar to template-driven
approach, adds an additional layer of complexity and functionality as you
need to declare the model of the form in your component class.
Quiz
QUIZ
There are two ways to build forms in Angular, namely _____ and _____.
1
a. Interface and Modular
b. Model and Template
c. Interface and Model
d. Modular and Template
QUIZ
There are two ways to build forms in Angular, namely _____ and _____.
1
a. Interface and Modular
b. Model and Template
c. Interface and Model
d. Modular and Template
The correct answer is b.
There are two ways to build forms in Angular, namely Model and Template.
QUIZ
Which of the following is NOT a built-in validator in Angular?
2
a. required
b. minlength
c. maxlength
d. notfound
QUIZ
Which of the following is NOT a built-in validator in Angular?
2
a. required
b. minlength
c. maxlength
d. notfound
The correct answer is d.
notfound is not a built-in validator in Angular.
QUIZ
Angular forms Control follows AbstractControl pattern.
3
a. True
b. False
QUIZ
Angular forms Control follows AbstractControl pattern.
3
a. True
b. False
The correct answer is a.
Angular forms Control follows AbstractControl pattern.
Thank You
