JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="">
    <form name="myForm" ng-controller="ValidationTest" novalidate="novalidate">
        <input name="email" ng-model="myForm.email" type="email" required="required" />
        <div>
            Field:
            <span ng-show="myForm.email.$valid">valid</span>
            <span ng-show="myForm.email.$invalid">invalid</span>
            <span ng-show="myForm.email.$pristine">pristine</span>
            <span ng-show="myForm.email.$dirty">dirty</span>
        </div>
        <div>
            Form:
            <span ng-show="myForm.$valid">valid</span>
            <span ng-show="myForm.$invalid">invalid</span>
            <span ng-show="myForm.$pristine">pristine</span>
            <span ng-show="myForm.$dirty">dirty</span>
        </div>
    </form>
</div>

CSS

input.ng-valid {
    border-color: #0f0;
}
input.ng-invalid {
    border-color: #f00;
}
input.ng-pristine {
    background-color: #eef;
}
input.ng-dirty {
    background-color: #fee;
}

JavaScript

function ValidationTest($scope) {}