Mastering Web Application

Creating Advanced Forms

Transforming the value between the model and the view

The ngModelController has a transformation pipeline that it applies each time the
data binding is updated. This consists of two arrays: $formatters that transforms
from model into view and $parsers that transforms from view to model. Each
directive on the input element can add in their own formatters and parsers to
this pipeline in order to modify what happens to the data binding as shown in the
following image:

ngModel Controller

MODEL VIEW

Date

Object

Date

String

Date parse. !==“”

! ==null Date toString.

required

directive

date

directive

PARSERS

FORMATTERS

Here two directives are adding to the transformation pipeline. The date directive is
parsing and formatting dates. The ng-required directive is checking that the value
is not missing.

Tracking whether the value has changed

Along with transforming the value between the model and the view, the
ngModelController tracks whether the value has changed since it was initialized
and whether the value is valid.

When it is first initialized the ngModelController marks the value as pristine, that
is, it has not been modified. It exposes this as an ng-pristine CSS class on the
input element. When the view changes, say through typing in an input box, the
value is marked as dirty. It replaces the ng-pristine CSS class with the ng-dirty
CSS class.