dpdragnev dpdragnev - 26 days ago 9
AngularJS Question

Material Design Input with currency format

Is there an input in Material Design that takes a format as a parameter. I specifically need the currency format.

If this is not available, what approach would you suggest to achieve this functionality.

Thanks.

Answer

You can do something like this, add the icon as the currency and use the following directive for masking,

<body ng-controller="MainCtrl" layout="column">
    <md-content  >
      <md-input-container class="md-icon-float">
        <label>Price</label>
        <md-icon md-font-icon="fa fa-money"></md-icon>
        <input  currency-mask ng-model="amount" id="sInput" />
      </md-input-container>
     </md-content>
  </body>

Directive

app.directive('currencyMask', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {

      var formatNumber = function(value) {

        value = value.toString();
        value = value.replace(/[^0-9\.]/g, "");
        var parts = value.split('.');
        parts[0] = parts[0].replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, "$&,");
        if (parts[1] && parts[1].length > 2) {
          parts[1] = parts[1].substring(0, 2);
        }

        return parts.join(".");
      };
      var applyFormatting = function() {
        var value = element.val();
        var original = value;
        if (!value || value.length == 0) {
          return
        }
        value = formatNumber(value);
        if (value != original) {
          element.val(value);
          element.triggerHandler('input')
        }
      };
      element.bind('keyup', function(e) {
        var keycode = e.keyCode;
        var isTextInputKey =
          (keycode > 47 && keycode < 58) || // number keys
          keycode == 32 || keycode == 8 || // spacebar or backspace
          (keycode > 64 && keycode < 91) || // letter keys
          (keycode > 95 && keycode < 112) || // numpad keys
          (keycode > 185 && keycode < 193) || // ;=,-./` (in order)
          (keycode > 218 && keycode < 223); // [\]' (in order)
        if (isTextInputKey) {
          applyFormatting();
        }
      });
      element.bind('blur', function(evt) {
        if (angular.isDefined(ngModelController.$modelValue)) {
          var val = ngModelController.$modelValue.split('.');
          if (val && val.length == 1) {
            if (val != "") {
              ngModelController.$setViewValue(val + '.00');
              ngModelController.$render();
            }
          } else if (val && val.length == 2) {
            if (val[1] && val[1].length == 1) {
              ngModelController.$setViewValue(val[0] + '.' + val[1] + '0');
              ngModelController.$render();
            } else if (val[1].length == 0) {
              ngModelController.$setViewValue(val[0] + '.00');
              ngModelController.$render();
            }
            applyFormatting();
          }
        }
      })
      ngModelController.$parsers.push(function(value) {
        if (!value || value.length == 0) {
          return value;
        }
        value = value.toString();
        value = value.replace(/[^0-9\.]/g, "");
        return value;
      });
      ngModelController.$formatters.push(function(value) {
        if (!value || value.length == 0) {
          return value;
        }
        value = formatNumber(value);
        return value;
      });
    }
  };
});

DEMO