Web | Angular 1 | Form Properties

by Zoltan Boros

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<body ng-app="formProperties" ng-controller="FormPropertiesController">
<form name="form1" novalidate>
    <input type="email" name="field1" ng-model="field1" required placeholder="Email address..." />
    <div ng-class="{ active : form1.field1.$valid }">valid</div>
    <div ng-class="{ active : form1.field1.$invalid }">invalid</div>
    <div ng-class="{ active : form1.field1.$pristine }">pristine</div>
    <div ng-class="{ active : form1.field1.$dirty }">dirty</div>
    <div ng-class="{ active : form1.field1.$touched }">touched</div>
    <div ng-class="{ active : form1.field1.$untouched }">untouched</div>
    <div ng-class="{ active : form1.field1.$pending }">pending</div>
</form>
<body>

CSS

div {
    color: #c0c0c0;
}

div.active {
    color: #000000;
}

JavaScript

var formProperties = angular.module('formProperties', []);
formProperties.controller('FormPropertiesController', ['$scope', FormPropertiesController]);

function FormPropertiesController($scope)
{}