In AngularJS, handling forms is an essential part of user interactions. Sometimes, you need to reset the form after submission or clear all input fields when a user clicks a reset button. AngularJS provides several ways to reset forms, ensuring a seamless user experience.
Topics Covered
- Why Reset a Form?
- Basic Method: Resetting Using
$setPristine()and$setUntouched() - Using
ng-clickto Reset Form Fields - Resetting the Form Using
ng-model - Example: Full Implementation of Resetting Forms
- Conclusion
1. Why Reset a Form?
Resetting a form is useful in several scenarios:
After form submission – To allow users to enter new data.
When users cancel an operation – To clear all fields.
For better user experience – Ensures a clean interface when needed.
2. Resetting Using $setPristine() and $setUntouched()
AngularJS provides built-in functions to reset form states:
$setPristine()– Resets the form to its original state, making$pristinetrue.$setUntouched()– Resets validation states, making$touchedfalse.
Example:
<!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>Name:</label>
<input type="text" name="name" ng-model="user.name" required>
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<button type="button" ng-click="resetForm()">Reset</button>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('FormController', function ($scope) {
$scope.user = {}; // Initial empty object
$scope.resetForm = function () {
$scope.user = {}; // Clear model data
$scope.userForm.$setPristine(); // Reset form state
$scope.userForm.$setUntouched(); // Reset validation state
};
});
</script>
</body>
</html>
How It Works:
Clears all input fields by resetting $scope.user.
Resets form validation state ($pristine and $touched).
Ensures form behaves as if it was never interacted with.
3. Using ng-click to Reset Form Fields
You can use ng-click to reset individual fields in the form.
Example:
<input type="text" ng-model="user.name">
<button type="button" ng-click="user.name=''">Clear Name</button>
Resets only one specific field without affecting others.
4. Resetting the Form Using ng-model
Instead of resetting the entire form, you can set specific fields back to default values.
Example:
$scope.user = { name: '', email: '' };
This method allows for partial resets rather than clearing the entire form.
5. Full Example: Resetting a Form After Submission
Here’s a complete implementation where the form resets after submission.
<!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" ng-submit="submitForm()">
<label>Name:</label>
<input type="text" name="name" ng-model="user.name" required>
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required>
<button type="submit">Submit</button>
<button type="button" ng-click="resetForm()">Reset</button>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('FormController', function ($scope) {
$scope.user = {}; // Initial empty object
$scope.submitForm = function () {
alert("Form submitted: " + JSON.stringify($scope.user));
$scope.resetForm(); // Reset after submission
};
$scope.resetForm = function () {
$scope.user = {}; // Clear model data
$scope.userForm.$setPristine(); // Reset form state
$scope.userForm.$setUntouched(); // Reset validation state
};
});
</script>
</body>
</html>
How It Works:
User submits the form → Form data resets automatically.
Clicking ‘Reset’ clears fields manually.