AngularJS: SSN Format Filters & Directive (JavaScript)

by Annie Lagang

HTML

<div ng-controller="testCtrl">
    <p>SSN Raw: {{ssn}}</p>
    <p>SSN Filtered: {{ssn | ssnFilter}}</p>
    <p>SSN Filtered/Masked: {{ssn | ssnFilter:true}}</p>
    <hr/>
    <p>SSN:
        <input type="text" ng-model="ssn" ssn-field ssn-field-mask="true" placeholder="###-##-####" />
    </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>

JavaScript

angular.module('pvdSSN', []).controller('testCtrl', function($scope) {
  return $scope.ssn = 123456789;
}).filter('ssnFilter', function() {
  return function(value, mask = false) {
    var len, val;
    if (value) {
      val = value.toString().replace(/\D/g, "");
      len = val.length;
      if (len < 4) {
        return val;
      } else if ((3 < len && len < 6)) {
        if (mask) {
          return `***-${val.substr(3)}`;
        } else {
          return `${val.substr(0, 3)}-${val.substr(3)}`;
        }
      } else if (len > 5) {
        if (mask) {
          return `***-**-${val.substr(5, 4)}`;
        } else {
          return `${val.substr(0, 3)}-${val.substr(3, 2)}-${val.substr(5, 4)}`;
        }
      }
    }
    return value;
  };
}).filter("ssnReverse", function() {
  return function(value) {
    if (!!value) {
      return value.replace(/\D/g, "").substr(0, 9);
    }
    return value;
  };
}).directive('ssnField', function($filter) {
  var ssnFilter, ssnReverse;
  ssnFilter = $filter('ssnFilter');
  ssnReverse = $filter('ssnReverse');
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, modelCtrl) {
      var formatter, mask, parser;
      mask = attrs.ssnFieldMask; // not sure how to use this?
      formatter = function(value) {
        return ssnFilter(value);
      };
      parser = function(value) {
        var formatted;
        formatted = ssnReverse(value);
        element.val(ssnFilter(formatted));
        return formatted;
      };
      modelCtrl.$formatters.push(formatter);
      return modelCtrl.$parsers.unshift(parser);
    }
  };
});

angular.bootstrap(document, ['pvdSSN']);