What You’ll Learn
Different ways to reset an AngularJS form
Using $setPristine(), $setUntouched(), and $setValidity()
Resetting form fields while maintaining the model
Best practices for form reset
1️⃣ Why Reset Forms in AngularJS?
When working with forms in AngularJS, you might need to reset them dynamically after submission or when the user clicks a “Reset” button.
Common Use Cases:
Clearing all input fields
Resetting validation errors
Returning the form to its pristine state
2️⃣ Basic Form Reset Using ng-model
The simplest way to reset a form is to clear the model values manually.
Example: Resetting Model Data
<div ng-app="myApp" ng-controller="FormController">
<form name="userForm" ng-submit="submitForm()" novalidate>
<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>
</div>
AngularJS Controller (Reset Model Data)
var app = angular.module("myApp", []);
app.controller("FormController", function ($scope) {
$scope.user = {}; // Empty object for form data
$scope.submitForm = function () {
alert("Form submitted!");
};
$scope.resetForm = function () {
$scope.user = {}; // Clears the input fields
};
});
Pros: Simple and easy
Cons: Validation errors & touched state are not reset
3️⃣ Resetting Form State Using $setPristine() & $setUntouched()
To reset validation errors and state, you need to reset both:
$setPristine()– Makes the form pristine (not interacted with)$setUntouched()– Makes the form untouched (user has not focused any fields)
Updated Reset Function
$scope.resetForm = function () {
$scope.user = {}; // Clears input fields
$scope.userForm.$setPristine(); // Reset form state
$scope.userForm.$setUntouched(); // Reset touched fields
};
Pros:
Clears inputs
Resets validation states
Resets dirty/touched indicators
4️⃣ Example: Full Form Reset with Validation
HTML Form with Validation
<div ng-app="myApp" ng-controller="FormController">
<form name="userForm" ng-submit="submitForm()" novalidate>
<label>Name:</label>
<input type="text" name="name" ng-model="user.name" required />
<span class="error" ng-show="userForm.name.$touched && userForm.name.$invalid">
Name is required.
</span>
<label>Email:</label>
<input type="email" name="email" ng-model="user.email" required />
<span class="error" ng-show="userForm.email.$touched && userForm.email.$invalid">
Enter a valid email.
</span>
<button type="submit" ng-disabled="userForm.$invalid">Submit</button>
<button type="button" ng-click="resetForm()">Reset</button>
</form>
</div>
AngularJS Controller
var app = angular.module("myApp", []);
app.controller("FormController", function ($scope) {
$scope.user = {}; // Form model
$scope.submitForm = function () {
alert("Form submitted successfully!");
};
$scope.resetForm = function () {
$scope.user = {}; // Reset model
$scope.userForm.$setPristine(); // Reset pristine state
$scope.userForm.$setUntouched(); // Reset touched state
};
});
5️⃣ Resetting Individual Form Fields
If you only need to reset a specific field, use $setValidity().
Reset a Single Field
$scope.resetEmailField = function () {
$scope.user.email = "";
$scope.userForm.email.$setPristine();
$scope.userForm.email.$setUntouched();
$scope.userForm.email.$setValidity("required", true);
};
Use Case: If you want to reset only the email field without affecting other inputs.