JSFiddle - React, Tailwind, and code Playground

by de Montalembert Jonathan

HTML

<form name="form" ng-submit='show=true' novalidate="novalidate">
    <input type="text" name='field' ng-minlength='5' ng-model='field' required="required" />
    <div ng-show="show && form.field.$invalid">
        error
    </div>
    <input type="email" name="email" ng-model='field2' id="" required='required' />
    confirm <input type="checkbox" name="confirm" ng-model="confirm" required="required">
    <div ng-show="form.confirm.$valid">Good</div>
    <button type="submit" ng-disabled='!form.$valid'>validate</button>
    <div ng-class="{valid:form.$pristine, invalid: !form.$pristine}">pristine</div>
    <div ng-class='{valid:form.$dirty, invalid: !form.$dirty}'>dirty</div>
    <div ng-class='{valid:form.$valid, invalid: !form.$valid}'>valid</div>
    <div ng-class='{valid:form.$invalid, invalid: !form.$invalid}'>invalid</div>
    
    {{form.$error}}
</form>

CSS

.valid{
    border: 1px solid green;
}
.invalid{
    border: 1px solid red;
}
div{
    padding:10px;
    margin:10px auto;
    width:90%;
}
input{
    outline:none;
}
input.ng-pristine{
    background:#ddd;
}
input.ng-invalid.ng-dirty{
    border:1px solid red;
}

JavaScript

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

angular.bootstrap(document, ['app'])