AngularJS Form Experiment

by Kristopher Johnson

HTML

<div ng-app="FormApp" ng-controller="FormController">

<form name="form" novalidate>
Required field 1: <input ng-model="textEntry1" name="textEntry1" type="text" ng-minlength="1" ng-maxlength="8" required autocomplete="off" placeholder="Required" autofocus="true">
<br>
Required field 2: <input ng-model="textEntry2" name="textEntry1" type="text" ng-minlength="2" ng-maxlength="8" required autocomplete="off" placeholder="At least 2 characters">    
</form>
<pre ng-cloak>
form.$pristine: {{ form.$pristine }}
form.$dirty:    {{ form.$dirty }}
form.$valid:    {{ form.$valid }}
form.$invalid:  {{ form.$invalid }}
form.$error:    {{ form.$error | json }}
</pre>

</div>

CSS

input.ng-invalid {
    background-color: #fcc;
}
input.ng-valid {
    background-color: #cfc;
}

JavaScript

angular.module('FormApp', [])

.controller('FormController', function($scope) {
});