State Properties
Angular includes properties which return the state of form and input controls. The state of the form and control changes based on the user's interaction and validation errors. These built-in properties can be accessed using form name or input control name. To check the form status use formName.propertyName, and to check the state of input control, use formName.inputFieldName.propertyName.
The following table lists the state properties.
Property |
Description |
$error |
$error object contains all the validation attributes applied to the specified element. |
$pristine |
Returns true if the user has not interacted with control yet else returns false. |
$valid |
Returns true if the model is valid |
$invalid |
Returns true if the model is invalid |
$dirty |
Returns true if user changed the value of model at least once |
$touched |
Returns true if the user has tabbed out from the control. |
$untouched |
Returns true if the user has not tabbed out from the control. |
The following example demonstrates the state properties.
Example: State Properties
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<form name="studentForm" novalidate>
<p>
First Name Status: <br />
Pristine: {{studentForm.firstName.$pristine}} <br />
Touched: {{studentForm.firstName.$touched}}<br />
Untouched: {{studentForm.firstName.$untouched}}<br />
Valid: {{studentForm.firstName.$valid}} <br />
Invalid: {{studentForm.firstName.$invalid}} <br />
Dirty: {{studentForm.firstName.$dirty}} <br />
Error: {{studentForm.firstName.$error}} <br />
</p>
<label for="firstName">First Name: </label> <br />
<input type="text" name="firstName" ng-model="student.firstName" ng-required="true" />
<span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span><br /><br />
<label for="lastName">Last Name</label><br />
<input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="student.lastName" /> <br />
<span ng-show="studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$error.maxlength">Max 10 chars.</span> <br />
<input type="submit" value="Save" />
</form>
</body>
</html>
For
More Explanation
&
Online Classes
More Explanation
&
Online Classes
Contact Us:
+919885348743
+919885348743