AngularJS provides built-in form validation states that help track user interactions with form fields. Among these, $dirty and $pristine are two important properties used to determine whether a form or an input field has been modified.
$pristine: The field is untouched; the user has not changed its value.
$dirty: The field has been modified by the user.
By understanding and using these states effectively, we can build dynamic and user-friendly form validation.
Topics Covered
- What are
$dirtyand$pristine? - Example: Detecting Field Modifications
- How
$dirtyand$pristineWork in Forms - Resetting Forms with
$setPristine() - Disabling the Submit Button Until Input is Modified
- Practical Use Cases
- Conclusion
1. What are $dirty and $pristine?
$pristine
- Default state of an input field before the user modifies it.
- Remains
$pristineuntil the user interacts with the field.
$dirty
- Becomes
$dirtyonce the user changes the field’s value. - Helps in tracking user input and triggering validation messages.
2. Example: Detecting Field Modifications
Let’s create a simple example to understand $dirty and $pristine.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="FormController">
<form name="userForm">
<label>Username:</label>
<input type="text" name="username" ng-model="user.username" required>
<p ng-show="userForm.username.$pristine">Field is pristine (not touched).</p>
<p ng-show="userForm.username.$dirty">Field is dirty (modified).</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('FormController', function ($scope) {
$scope.user = {};
});
</script>
</body>
</html>
How It Works:
When the page loads, “Field is pristine” is displayed.
As soon as the user types something, “Field is dirty” appears instead.
This allows us to detect when the user modifies a field.
3. How $dirty and $pristine Work in Forms
Each input field inside a <form> has its own $dirty and $pristine state. The form itself also has these states.
Example: Tracking Form-Level Changes
<form name="userForm">
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<p ng-show="userForm.$pristine">Form is pristine (no fields modified).</p>
<p ng-show="userForm.$dirty">Form is dirty (at least one field modified).</p>
</form>
Initially, the form is pristine.
Once the user modifies any field, the form becomes dirty.
4. Resetting Forms with $setPristine()
After form submission, resetting it to its original state is important. AngularJS provides $setPristine() to achieve this.
Example: Resetting Form State
<form name="userForm" ng-submit="submitForm()" novalidate>
<label>Name:</label>
<input type="text" name="name" ng-model="user.name" required>
<button type="submit">Submit</button>
<button type="button" ng-click="resetForm()">Reset</button>
</form>
<script>
app.controller('FormController', function ($scope) {
$scope.user = {};
$scope.submitForm = function () {
alert("Form submitted!");
$scope.user = {}; // Clear form data
$scope.userForm.$setPristine(); // Reset form state
$scope.userForm.$setUntouched();
};
$scope.resetForm = function () {
$scope.user = {};
$scope.userForm.$setPristine();
$scope.userForm.$setUntouched();
};
});
</script>
How It Works:
Clicking Submit or Reset clears the input fields.
$setPristine() makes the form pristine again.
$setUntouched() ensures no validation messages are shown.
5. Disabling the Submit Button Until Input is Modified
Sometimes, we want to disable the Submit button until the user modifies the form.
<form name="userForm">
<label>Password:</label>
<input type="password" name="password" ng-model="user.password" required>
<button type="submit" ng-disabled="userForm.$pristine">Submit</button>
</form>
Button remains disabled until the user enters something.
Once the field is modified, the button becomes active.
6. Practical Use Cases
Showing Validation Messages Only After Input Changes
<form name="userForm">
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<p ng-show="userForm.email.$dirty && userForm.email.$invalid">Invalid email!</p>
</form>
Error message appears only when the user starts typing.
Detecting If a User Has Changed Data Before Leaving
<script>
window.onbeforeunload = function () {
if (angular.element(document.querySelector('[ng-app]')).scope().userForm.$dirty) {
return "You have unsaved changes!";
}
};
</script>
Warns users before they leave without saving changes.