Q5

formatters and parsers

by Preetha Srinivasan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div ng-app="myapp" ng-controller="formatCtrl">
   <input type="text" ng-model="phone" format /> 
</div>

JavaScript

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

app.controller('formatCtrl', function ($scope) {
    $scope.phone = "8177079399";
});

app.$inject = ['$scope'];

app.directive('format', [function () {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;


            ctrl.$formatters.unshift(function (modelValue) {               
                return formatToUSPhone(ctrl.$modelValue);
            });


            ctrl.$parsers.unshift(function (viewValue) {                 
                var formattedTxt = formatToUSPhone(viewValue);              
                elem.val(formattedTxt);               
                return removeNonNumerics(viewValue);
            });
            
            function formatToUSPhone(phone){
              var modifiedPhone = removeNonNumerics(phone);                
              modifiedPhone = "(" + modifiedPhone.substr(0, 3) + ")" + modifiedPhone.substr(3, 3) + '-' +                 modifiedPhone.substr(6,10)              
              return modifiedPhone;
            }
            
            function removeNonNumerics(phone){
             return phone.replace(/\D/g,'').substring(0,10);  
            }
        }
    };
}]);