$parsers and $formatters in Angularjs

$parsers and $formatters are array of function defined on ngModelController. When there is change in values (view or model), the value is passed through the $parsers or $formatters pipeline to convert it according to the needs.

$parsers (View to Model):

• $parsers is an array of function which executes when there is change in view  value ($veiwValue), usually via user input.
• $parsers cause the conversion of view value into the form desirable to assign in model value.
• The value is passed through each $parsers function and the return value of one function is passed to next function.
• Last return value is passed to $validators and after validation the value is assigned to model.
• These $parsers functions are called array order (i.e. index 0 to n).
• $parsers are not called when there is change in model value programmatically.
• $parsers function must return some value. If it not, causes parse error and model value is set to undefined.

Let's see the simple example to understand how $parsers works. Here is code;
HTML Code:

<div ng-app="myApp" ng-controller="myAppCtrl">
 view value = <input type="text" ng-model="v" parsers-example><br>
 model value = {{v}}
</div>

Javascript Code:

var app = angular.module('myApp',[]);

app.controller('myAppCtrl',['$scope',function($scope){
 $scope.v = '';
}]);

app.directive('parsersExample',[function(){
 return {
  require : 'ngModel',
  link : function(scope, iElement, iAttribute, ngModelController){

   function parser1(veiwvalue){
    if(veiwvalue){
     return veiwvalue + '_parser1';
    }
   }

   function parser2(veiwvalue){
    if(veiwvalue){
     return veiwvalue + '_parser2';
    }
   }

   ngModelController.$parsers.push(parser2);
   ngModelController.$parsers.push(parser1);
  }
 };
}]);

In the above HTML code, we have used input field to change the view value and one way binding to see the model value. In javascript code, we have defined a directive called parsersExample. In the linking function of the directive, we have defined two parsers functions namely parsers1() and parsers2(). And then pushed the function into the $parsers array defined on ngModelController. The order of pushing (note that functions are pushed in array) of functions matters. See the working example to understand the execution of functions:

$formatters (Model to View):

• $formatters is an array of function which execute when there is change in expression bound in ngModel programmatically, usually via events or function call.
• $formatters cause the conversion of $modelValue into the form desirable to assign in $veiwValue. Formatters are used to format / convert the $modelValue for display.
• The value is passed through each $formatters function and the return value of one function is passed to next function.
• Last return value is used as actual DOM value.
• These $parsers functions are called reverse array order (i.e. index n to 0).
• $formatters are not called when there is change in value via user interaction.
• $formatters function must return some value. If it not, causes error and view value is set to undefined.

Let's see the simple example to understand how $formatters works. Here is code;
HTML Code:

<div ng-app="myApp" ng-controller="myAppCtrl">
 model value = {{v}} | <button ng-click="addTwo()">Add 2 to model value</button><br><br>
 view value = <input type="text" ng-model="v" formatters-example><br>
</div>

Javascript Code:

var app = angular.module('myApp',[]);

app.controller('myAppCtrl',['$scope',function($scope){
 $scope.v = 0;
 $scope.addTwo = function(){
  $scope.v += 2;
 }
}]);

app.directive('formattersExample',[function(){
 return {
  require : 'ngModel',
  link : function(scope, iElement, iAttribute, ngModelController){

   function formatters1(modelvalue){
    if(modelvalue){
     return modelvalue + '_formatters1';
    }
   }

   function formatters2(modelvalue){
    if(modelvalue){
     return modelvalue + '_formatters2';
    }
   }

   ngModelController.$formatters.unshift(formatters2);
   ngModelController.$formatters.unshift(formatters1);
  }
 };
}]);

In the above HTML code, we have used input field to the view value and one way binding to see the model value. Function addTwo() is defined to add 2 in model value and is called via button click. In javascript code, we have defined a directive called formattersExample. In the linking function of the directive, we have defined two formatters functions namely formatters1() and formatters2(). And then unshift the function into the $formatters array defined on ngModelController. The order of unshifting (note that functions are unshift in array) of functions matters. See the working example to understand the execution of functions: