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