Angular Form Properties:
Property Name Description
$valid This property tells that the form/input field value is valid. True/False.
$invalid This property tells that the form/input field value is invalid. True/False.
$pristine This boolean property tells that the form/input has not been used/modified yet.
$dirty This boolean property tells that the form/input has been used/modified.
$touched This boolean property says that input field is touched (applied only for input).
$untouched This boolean property says that input field is not touched yet (applied only for input).
$submitted This boolean property says that the form is submitted (applied only for form).
Classes:
Class Name Description
ng-valid The input filed content is valid.
ng-invalid The input filed content is not valid.
ng-pristine The form/ input field has not been modified/used yet.
ng-dirty The form/ input field has been modified/used.
ng-touched The input field has been touched.
ng-untouched The input field has not been touched yet.
//formvalidation.html
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="validationApp" ng-controller="mainController">
<div class="container" style="width:600px">
<div class="page-header"><h1>AngularJS Form Validation</h1></div>
<form name="loginForm" ng-submit="submitForm(loginForm.$valid)" novalidate>
<div class="form-group" ng-class="{ 'has-error' : loginForm.name.$invalid && !loginForm.name.$pristine }">
<label>Name*</label>
<input type="text" name="name" class="form-control" ng-model="name" ng-minlength="3" ng-maxlength="8" required>
<p ng-show="loginForm.name.$dirty && loginForm.name.$error.required" class="help-block">Name is required</p>
<p ng-show="loginForm.name.$error.minlength" class="help-block">Name is too short.</p>
<p ng-show="loginForm.name.$error.maxlength" class="help-block">Name is too long.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : loginForm.userName.$invalid && !loginForm.userName.$pristine }">
<label>UserName(email)*</label>
<input type="email" name="userName" class="form-control" ng-model="userName">
<p ng-show="loginForm.userName.$invalid && !loginForm.userName.$pristine" class="help-block">Enter a valid email.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : loginForm.password.$invalid && !loginForm.password.$pristine }">
<label>Password*</label>
<input type="password" name="password" class="form-control" ng-model="password" ng-minlength="6" ng-maxlength="8" required>
<p ng-show="loginForm.password.$invalid && !loginForm.password.$pristine" class="help-block">Password must be between 6-8 characters.</p>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="loginForm.$invalid">Submit</button>
</form>
</div>
<script>
var validationApp = angular.module('validationApp', []);
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
// check to make sure the form is completely valid
if (isValid) {
alert('Login Form is valid');
}
};
});
</script>
</body>
</html>
