JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&lt;link href=&quot;//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<div ng-app="test">
		<div ng-controller="NumberCtrl">

			<form name="numberForm">
				<input name="amount" type="text" ng-model="amount" required  valid-number />
			</form>
        
            <span ng-show="numberForm.amount.$error.validNumber">Doesn't look like an integer</span>
           
            
		</div>
	</div>

CSS

input.ng-invalid {
		background-color: #FA787E;
	}

JavaScript

angular.module('test',[]).directive('validNumber',function(){
				return{
					require: "ngModel",
					link: function(scope, elm, attrs, ctrl){
						var regex = /^\d$/;
                        var validator = function(value){
							//var floatValue = parseFloat(value);
                            ctrl.$setValidity('validNumber', regex.test(value));
							return value;
						};
						
						ctrl.$parsers.unshift(validator);
                        ctrl.$formatters.unshift(validator);
					}
				};
			});
  
	function NumberCtrl($scope)  {
        $scope.amount = "3";
    }