JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
<div ng-controller="MyCtrl">
<form name="form">
    <input name="requiredField" ng-model="model.requiredField" required/> (Required, but no other validators)
    <p ng-show="form.requiredField.$errror.required">Field is required</p>
    <button ng-click="reset()">Reset form</button>
</form>
<p>Pristine: {{form.$pristine}}</p>
</div>
</div>

CSS

input.ng-dirty.ng-invalid {
    background-color: red;
}
input[required].ng-pristine {
    background-color: yellow;
}
input[required].ng-dirty.ng-valid {
    background-color: green;
    color: white;
}

JavaScript

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

function MyCtrl($scope) {
    $scope.reset = function() {
        $scope.form.$setPristine();
        $scope.model = '';
    };
}

(function(angular) {

function indexOf(array, obj) {
  if (array.indexOf) return array.indexOf(obj);

  for ( var i = 0; i < array.length; i++) {
    if (obj === array[i]) return i;
  }
  return -1;
}

function arrayRemove(array, value) {
  var index = indexOf(array, value);
  if (index >=0)
    array.splice(index, 1);
  return value;
}

var PRISTINE_CLASS = 'ng-pristine';
var DIRTY_CLASS = 'ng-dirty';

var formDirectiveFactory = function(isNgForm) {
	return function() {
		var formDirective = {
			restrict: 'E',
			require: ['form'],
			compile: function() {
				return {
					pre: function(scope, element, attrs, ctrls) {
						var form = ctrls[0];
						var $addControl = form.$addControl;
						var $removeControl = form.$removeControl;
						var controls = [];
						form.$addControl = function(control) {
							controls.push(control);
							$addControl.apply(this, arguments);
						}
						form.$removeControl = function(control) {
							arrayRemove(controls, control);
							$removeControl.apply(this, arguments);
						}
						form.$setPristine = function() {
							element.removeClass(DIRTY_CLASS).addClass(PRISTINE_CLASS);
							form.$dirty = false;
							form.$pristine = true;
							angular.forEach(controls, function(control) {
								control.$setPristine();
							});
						}
					},
				};
			},
		};
		return isNgForm ? angular.extend(angular.copy(formDirective), {restrict: 'EAC'}) : formDirective;
	};
}
var ngFormDirective = formDirectiveFactory(true);
var formDirective = formDirectiveFactory();
angular.module('resettableForm', []).
	directive('ngForm', ngFormDirective).
	directive('form', formDirective).
	directive('ngModel', function() {
		return {
			require: ['ngModel'],
			link: function(scope, element, attrs, ctrls) {
				var control =...