JSFiddle - React, Tailwind, and code Playground

by michaeldeongreen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div ng-app="myApp">
  <h2>Validate Price</h2>
  <div ng-controller="MainCtrl">

      <input type="text" ng-model="salary" placeholder="0.0000" decimal-places="4" valid-number />
  </div>
</div>

CSS

80
25

JavaScript

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

    app.controller('MainCtrl', function($scope) {
    });

    app.directive('validNumber', function() {
      return {
        require: '?ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          if(!ngModelCtrl) {
            return; 
          }
            
          ngModelCtrl.$parsers.push(function(val) {
            if (angular.isUndefined(val)) {
                var val = '';
            }
            var clean = val.replace(/[^0-9\.]/g, '');
            var decimalCheck = clean.split('.');
            var numberOfDecimalPlaces = 2;

            if (attrs.decimalPlaces != undefined && attrs.decimalPlaces != null && attrs.decimalPlaces != '') {
                numberOfDecimalPlaces = attrs.decimalPlaces;                
              }
              
            
            if(!angular.isUndefined(decimalCheck[1])) {
                decimalCheck[1] = decimalCheck[1].slice(0,numberOfDecimalPlaces);
                clean =decimalCheck[0] + '.' + decimalCheck[1];
            }

            if (val !== clean) {
              ngModelCtrl.$setViewValue(clean);
              ngModelCtrl.$render();
            }
            return clean;
          });

          element.bind('keypress', function(event) {
            if(event.keyCode === 32) {
              event.preventDefault();
            }
          });
        }
      };
    });