Creditcard format

by Zareh Geertjes

HTML

<div ng-app="creditCardModule" ng-controller="MyCntl">
    <p>Credit Card Value: {{ myModel.creditCard }}</p>
    <p>Formatted Credit Card: {{ myModel.creditCard | creditCard }}</p>
    <form name="creditCardForm">
        <creditcard-directive placeholder="myPrompt" model='myModel.creditCard'></creditcard-directive>
        <div ng-show="creditCardForm.creditCard.$error.minlength)">
          <p>Enter a valid Credit Card number</p>
        </div>
    </form>
</div>

JavaScript

// see gist: https://gist.github.com/aberke/042eef0f37dba1138f9e

function MyCntl($scope) {
    $scope.myModel = {};
    $scope.myPrompt = "Input your Credit Card here!";
}

var creditCardModule = angular.module('creditCardModule', []);
 
creditCardModule.directive('creditcardDirective', ['$filter', function($filter) {
  /*
  Intended use:
  <creditcard-directive placeholder='4242 4242 4242 4242' model='someModel.creditcard'></creditcard-directive>
  Where:
  someModel.creditcard: {String} value which to bind only the numeric characters [0-9] entered
  prompt: {String} text to keep in placeholder when no numeric input entered
  */

  function link(scope, element, attributes) {

    // scope.inputValue is the value of input element used in template
    scope.inputValue = scope.creditCardModel;

    scope.$watch('inputValue', function(value, oldValue) {

      value = String(value);
      var number = value.replace(/[^0-9]+/g, '');
      scope.creditCardModel = number;
      scope.inputValue = $filter('creditCard')(number);
    });
  }

  return {
    link: link,
    restrict: 'E',
    scope: {
      creditCardPlaceholder: '=placeholder',
      creditCardModel: '=model',
    },
    // templateUrl: '/static/phonenumberModule/template.html',
    template: '<input type="tel" name="ccNum" class="form-control" ng-model="inputValue" class="ccNum" placeholder="{{creditCardPlaceholder}}" id="inputCCNum" data-stripe="number" inputmode="numeric">'
  };
}]);

creditCardModule.filter('creditCard', function() {

  // use Regex /^([a-z0-9]{5,})$/.test('abc1'); evaluates true or false

  return function (number) {
    /*
    @param {Number | String} number - Number that will be formatted as telephone number
    Returns formatted number: ####-####-####-#### (VISA, MasterCard, Discover) or ####-######-##### (AMEX)
    */

    if (!number) { return ''; }

    number = String(number);

    // Will return formattedNumber.
    var formattedNumber = number;

    // VISA
    if...