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/;
						ctrl.$parsers.unshift(function(viewValue){
							var floatValue = parseFloat(viewValue);
							
                            if(regex.test(viewValue)){
								ctrl.$setValidity('validNumber',true);
							}
                            else{
							    ctrl.$setValidity('validNumber',false);
                            }
							return viewValue;
						});
					}
				};
			});
  
	function NumberCtrl($scope)  {
        $scope.amount = "not a number";
    }