JSFiddle - React, Tailwind, and code Playground

by Ahmad M. Shafiee

HTML

<form ng-app="myapp" name="myform" novalidate> 
    <div ng-controller="Ctrl">
    <input name="number" is-number ng-model="myNumber1">
    <input name="number" is-number ng-model="myNumber2">
    </div>
</form>

JavaScript

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

app.controller('Ctrl', function($scope) {
    $scope.myNnumber1 = 1;
    $scope.myNnumber2 = 1;
});

app.directive('isNumber', function () {
	return {
		require: 'ngModel',
		link: function (scope, element) {	
			scope.$watch(element.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)) {
                    element.ngModel = oldValue;
                }
            });
		}
	};
});