JSFiddle - React, Tailwind, and code Playground

HTML

<form ng-app="myapp" name="myform" novalidate> 
    <div ng-controller="Ctrl">
    <input name="number" is-number ng-model="wks.number">
    <span ng-show="!wks.validity">Value is invalid</span>
    </div>
</form>

JavaScript

var $scope;
var app = angular.module('myapp', []);

app.controller('Ctrl', function($scope) {
    $scope.wks =  {number: 1, validity: true}
});

app.directive('isNumber', function () {
	return {
		require: 'ngModel',
		link: function (scope, element, attrs, ngModel) {	
    	element.bind("keydown keypress", function (event) {
          if(event.which === 32) {
            event.returnValue = false;
            return false;
          }
       }); 
			scope.$watch(attrs.ngModel, function(newValue,oldValue) {
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    //scope.wks.number = oldValue;
                    ngModel.$setViewValue(oldValue);
    								ngModel.$render();
                }
            });
          
		}
	};
});