In AngularJS, resetting a form dynamically is essential when handling user inputs, clearing errors, and ensuring a smooth user experience. Below, we explore different ways to reset form state, clear fields, and maintain validation consistency.
1. Understanding Form State in AngularJS
Before resetting, it’s important to understand the form states:
| Property | Description |
|---|---|
$pristine | True if the form has not been modified |
$dirty | True if the user has modified any field |
$valid | True if all fields meet validation rules |
$invalid | True if any field fails validation |
$submitted | True if the form has been submitted |
2. Basic Form Reset Using ng-click and $setPristine()
The simplest way to reset a form is by using AngularJS’s $setPristine() and $setUntouched() methods.
Example
<form name="myForm" ng-submit="submitForm()" novalidate>
<label>Name:</label>
<input type="text" name="username" ng-model="user.name" required>
<p ng-show="myForm.username.$dirty && myForm.username.$error.required">Name is required!</p>
<button type="submit">Submit</button>
<button type="button" ng-click="resetForm()">Reset</button>
</form>
Controller Code
app.controller('FormController', function($scope) {
$scope.user = {};
$scope.resetForm = function() {
$scope.user = {}; // Clears input fields
$scope.myForm.$setPristine(); // Resets form state
$scope.myForm.$setUntouched(); // Resets touched fields
};
});
Key Takeaways:
$setPristine()resets the form to an untouched state.$setUntouched()resets all controls to their untouched state.- Setting
$scope.user = {}clears input fields.
3. Reset Form and Maintain Default Values
If the form has default values, store them in a variable and restore them on reset.
Example
app.controller('FormController', function($scope) {
$scope.defaultUser = { name: 'John Doe', email: 'john@example.com' };
$scope.user = angular.copy($scope.defaultUser);
$scope.resetForm = function() {
$scope.user = angular.copy($scope.defaultUser);
$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();
};
});
Why use angular.copy()?
- Ensures a deep copy of objects.
- Prevents unwanted modifications to the default reference.
4. Reset a Specific Field Instead of the Entire Form
Sometimes, you only need to reset a single input field.
Example
<input type="text" name="username" ng-model="user.name" required>
<button type="button" ng-click="resetField('name')">Reset Name</button>
Controller Code
$scope.resetField = function(fieldName) {
$scope.user[fieldName] = '';
$scope.myForm[fieldName].$setPristine();
$scope.myForm[fieldName].$setUntouched();
};
This resets only the specified field without affecting others.
5. Resetting Forms After Submission
After submitting the form, you may want to reset the state.
Example
$scope.submitForm = function() {
if ($scope.myForm.$valid) {
alert('Form Submitted Successfully!');
$scope.resetForm(); // Reset after submission
}
};
6. Reset Form Using ng-init
You can initialize values using ng-init in the HTML.
Example
<form name="myForm" ng-init="user.name='Default Name'">
<input type="text" name="username" ng-model="user.name">
</form>
This approach initializes values but does not reset form state dynamically.
7. Automatically Reset Form After a Timeout
You can reset the form automatically after a delay using $timeout.
Example
app.controller('FormController', function($scope, $timeout) {
$scope.submitForm = function() {
if ($scope.myForm.$valid) {
alert('Form submitted!');
$timeout($scope.resetForm, 3000); // Resets after 3 seconds
}
};
});
Useful for temporary form confirmations before resetting.
8. Using Directives for Form Reset
A reusable directive can simplify resetting forms.
Directive Code
app.directive('resetButton', function() {
return {
restrict: 'E',
template: '<button type="button" ng-click="reset()">Reset</button>',
scope: { form: '=' },
link: function(scope) {
scope.reset = function() {
scope.form.$setPristine();
scope.form.$setUntouched();
};
}
};
});
Usage
<reset-button form="myForm"></reset-button>
This makes resetting forms reusable across different components.
9. Prevent Unwanted Reset with Confirmation
To prevent accidental resets, use confirm().
Example
$scope.resetForm = function() {
if (confirm('Are you sure you want to reset the form?')) {
$scope.user = {};
$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();
}
};
This ensures users don’t lose data unintentionally.