JSFiddle - React, Tailwind, and code Playground

by suraj mahajan

HTML

<div ng-app ng-controller="ctrl">
   
    <form name="myForm">
        <input type="text" name="input" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX" ng-minlength="1" ng-maxlength="4" min="1" max="9999" ng-class="{'red':myForm.input.$invalid}" />

        <br />
        <br />
        
        <tt>value = {{search.main}}</tt><br/>
        <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
        <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    </form>

</div>

CSS

.red {
    border:1px solid red;
}

input {
    padding:10px;
    outline:none;
}

JavaScript

function ctrl($scope) {
    $scope.search = {
        main: 1
    };
}