JSFiddle - React, Tailwind, and code Playground

by Usman Zafar

HTML

<div ng-app="jmApp">
  <h2>Validate Price</h2>
  <div ng-controller="MainCtrl">

      <input type="number" ng-model="salary" valid-number />
  </div>
</div>

JavaScript

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

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

    app.directive('validNumber', function() {
      return {
        require: '?ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          if(!ngModelCtrl) {
            return; 
          }

          ngModelCtrl.$parsers.push(onModelChange);
          element.bind('keypress', onKeyPress);
          
          function onModelChange(val) {
          	if (angular.isUndefined(val)) {
                var val = '';
            }
            
            var clean = val.replace(/[^-0-9\.]/g, '');
            var negativeCheck = clean.split('-');
						var decimalCheck = clean.split('.');
            
            if(!angular.isUndefined(negativeCheck[1])) {
                negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
                clean =negativeCheck[0] + '-' + negativeCheck[1];
                if(negativeCheck[0].length > 0) {
                	clean =negativeCheck[0];
                }
                
            }
              
            if(!angular.isUndefined(decimalCheck[1])) {
                decimalCheck[1] = decimalCheck[1].slice(0,2);
                clean =decimalCheck[0] + '.' + decimalCheck[1];
            }

            if (val !== clean) {
              ngModelCtrl.$setViewValue(clean);
              ngModelCtrl.$render();
            }
            
            return clean;
          }
          
          function onKeyPress() {
            if(event.keyCode === 32) {
                event.preventDefault();
            }
          }
        }
      };
    });