JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as ctrl">
  <form name="ctrl.myForm">
    <div><label for="email">Email</label>
    <input name="myInput" type="email" ng-model="ctrl.email" id="email" required></div>
    <div><label for="password">Password</label>
    <input name="myPassword" type="password" minlength="8" ng-model="ctrl.password" id="password" required></div>
    <div>
    <button ng-click="ctrl.reset()" type="button">Reset</button>
    </div>
  </form>
  <div>
    <h4>Form Level</h4>
    <div>$dirty: {{ctrl.myForm.$dirty}}</div>
    <div>$pristine: {{ctrl.myForm.$pristine}}</div>
    <h4>Input Level</h4>
    <h5>Email Input</h5>
    <div>$dirty: {{ctrl.myForm.myInput.$dirty}}</div>
    <div>$pristine: {{ctrl.myForm.myInput.$pristine}}</div>
    <div>$touched: {{ctrl.myForm.myInput.$touched}}</div>
    <h5>Password Input</h5>
    <div>$dirty: {{ctrl.myForm.myPassword.$dirty}}</div>
    <div>$pristine: {{ctrl.myForm.myPassword.$pristine}}</div>
    <div>$touched: {{ctrl.myForm.myPassword.$touched}}</div>
  </div>
  <div>
  <h3>Color outlines for input</h3>
  <div title="The form loads this way, it can still be invalid since required fields are empty to start with">untouched, pristine: no outline</div>
  <div title="Such as in the middle of typing a valid email for the first time">invalid, untouched, dirty: green outline</div>
  <div title="blurred with invalid input">invalid, touched, dirty: red outline</div>
  <div title="focued and blurred without typing">invalid, touched: blue outline</div>
  </div>
</div>

CSS

.ng-invalid.ng-touched{
  outline: 2px solid blue;
}
.ng-invalid.ng-dirty{
  outline: 2px solid red;
}
.ng-invalid.ng-dirty.ng-untouched{
  outline: 2px solid green;
}
form,form div{
  padding: 5px 10px;
}
h3,h4{
  margin-bottom:0;
}

JavaScript

angular.module('myApp', [])
	.controller('myCtrl', myCtrl);
  
function myCtrl(){
	var vm = this;
  vm.reset = function(){
  	vm.myForm.$setPristine();
    vm.myForm.$setUntouched();
    vm.email = vm.password = '';
  }
}