AngularJS provides various built-in properties for form validation, among which $touched and $untouched help track user interactions with form elements. These properties allow us to display validation messages only when necessary and improve user experience.
What are $touched and $untouched?
-
$untouched→ The field has not been interacted with yet. -
$touched→ The field has been focused and then blurred (clicked into and clicked out of).
These states are useful for displaying validation messages only after the user has interacted with the input field.
Topics Covered
$touchedvs.$untouchedExplained- Example: Detecting
$touchedand$untouchedStates - Showing Validation Messages Only After Touch
- Resetting Forms with
$setUntouched() - Practical Use Cases
- Conclusion
1. $touched vs. $untouched Explained
| Property | Meaning |
|---|---|
| $untouched | The user has never clicked or focused on the input. |
| $touched | The user has clicked on the input and then clicked away (blurred the field). |
Key Differences from $pristine and $dirty
| Property | When does it change? |
|---|---|
| $pristine → $dirty | When the user modifies the field’s value. |
| $untouched → $touched | When the user focuses on and then blurs the field. |
2. Example: Detecting $touched and $untouched States
<!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.$untouched">Field is untouched.</p>
<p ng-show="userForm.username.$touched">Field is touched.</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('FormController', function ($scope) {
$scope.user = {};
});
</script>
</body>
</html>
How It Works:
Initially, “Field is untouched” is displayed.
Once the user clicks into the input and clicks out, “Field is touched” appears.
3. Showing Validation Messages Only After Touch
We often don’t want to show error messages until the user has interacted with a field. $touched helps us achieve this.
<form name="userForm">
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<p ng-show="userForm.email.$touched && userForm.email.$invalid" style="color: red;">
Please enter a valid email.
</p>
</form>
How It Works:
The error message only appears after the user clicks into and then out of the field.
If the user never touches the field, the error message stays hidden.
4. Resetting Forms with $setUntouched()
After submitting a form, you may want to reset it to its original state, including setting all fields to $untouched. AngularJS provides $setUntouched() for this.
Example: Reset Form State After Submission
<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 pristine state
$scope.userForm.$setUntouched(); // Reset touched state
};
$scope.resetForm = function () {
$scope.user = {};
$scope.userForm.$setPristine();
$scope.userForm.$setUntouched();
};
});
</script>
How It Works:
Clicking Submit or Reset clears the form fields.
$setUntouched() makes the form untouched again.
$setPristine() resets the dirty state.
5. Practical Use Cases
Show Error Messages Only After Field is Touched
<form name="userForm">
<label>Phone Number:</label>
<input type="text" name="phone" ng-model="user.phone" required>
<p ng-show="userForm.phone.$touched && userForm.phone.$invalid" style="color: red;">
Invalid phone number!
</p>
</form>
Prevents error messages from showing immediately.
Disabling Submit Button Until Input is Touched
<form name="userForm">
<label>Password:</label>
<input type="password" name="password" ng-model="user.password" required>
<button type="submit" ng-disabled="userForm.password.$untouched">Submit</button>
</form>
Button remains disabled until the user clicks on the password field.