angular directive $formatters and $parsers

by bandara00007

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <form name="testForm">
    <div>
      <input ng-model="color" type="text" formatter />
      <br> color : {{color}}
    </div>

    <div>
      <input name="inputNumber" ng-model="numberVal" type="number" parser />
      <br> testForm.inputNumber.$error.evenNumber : {{testForm.inputNumber.$error}}
    </div>
    <div>
      <input name="inputNumberValidator" ng-model="numberValidatorVal" type="number" validator />
      <br> testForm.inputNumberValidator.$error.evenNumber : {{testForm.inputNumberValidator.$error}}
    </div>

  </form>
</div>

JavaScript

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.color = 'yellow';
    $scope.numberVal = 0;
    $scope.numberValidatorVal = 0;
  })
  .directive('formatter', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attr, ngModelController) {

        function toUppercase(inputVal) {
          return inputVal.toUpperCase();
        }

        ngModelController.$formatters.push(toUppercase);

      }
    };
  })
  .directive('parser', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attr, ngModelController) {

        function isOdd(inputVal) {
          if (parseInt(inputVal) % 2 === 1) {
            ngModelController.$setValidity('evenNumber', true);
          } else {
            ngModelController.$setValidity('evenNumber', false);
          }
          return inputVal;
        }

        ngModelController.$parsers.push(isOdd);
      }
    };
  }).directive('parser', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attr, ngModelController) {

        function isOdd(inputVal) {
          if (parseInt(inputVal) % 2 === 1) {
            ngModelController.$setValidity('evenNumber', true);
          } else {
            ngModelController.$setValidity('evenNumber', false);
          }
          return inputVal;
        }

        ngModelController.$parsers.push(isOdd);
      }
    };
  })
  .directive('validator', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attr, ngModelController) {

        ngModelController.$validators.evenNumber = function(modelValue, viewValue) {
        var inputVal = modelValue || viewValue;
          if (parseInt(inputVal) % 2 === 1) {
            return true;
          } else {
            return false;
          }
          return inputVal;
        }

      }
    };
  });