JSFiddle - React, Tailwind, and code Playground

by George

HTML

<div ng-controller="myCtrl">
  <input type="text" ng-model="myfield" ng-pattern="validation_pattern">
  <button ng-click="only_number()">Only Numbers</button>
  <button ng-click="only_letters()">Only Letters</button>
</div>

CSS

input.ng-invalid {
    border-color: #ffdddd #ddcccc #ddcccc #ffdddd;
    border-style: solid;
    background-color: #ff6666;
}

JavaScript

var app = angular.module('myApp', [])
.controller( 'myCtrl',['$scope',function($scope){
  $scope.myfield = "my field"
	$scope.validation_pattern = /^[ a-zA-Z]*$/;
  $scope.only_number = function() { $scope.validation_pattern = /^[0-9]*$/; };
  $scope.only_letters = function() { $scope.validation_pattern = /^[ a-zA-Z]*$/; };
}]);