Form reset not clearing validation errors

When resetting a form in AngularJS, you might notice that while the input fields are cleared, validation errors persist. This happens because simply resetting the form does not reset the form’s validation state.

In this guide, we will explore the causes and provide step-by-step solutions to ensure that the form clears both input fields and validation errors properly.

---

1. Why Does the Issue Occur?

AngularJS tracks form states (such as $dirty, $touched, and $invalid) separately from the actual input values. When you reset the form using JavaScript ($scope.formName = {} or $scope.formName.$setPristine()), the input values may reset, but validation errors may remain because Angular does not automatically reset validation states.

---

2. Common Fixes for Resetting Form and Validation Errors

Solution 1: Use $setPristine() and $setUntouched()

The best way to reset the form and validation errors is to use AngularJS form methods like:

• $setPristine(): Marks the form as pristine (as if the user never interacted with it).
• $setUntouched(): Resets the form’s touched state.

Working Example

HTML:

<div ng-app="myApp" ng-controller="FormCtrl">
    <form name="myForm">
        <input type="text" name="username" ng-model="user.username" required>
        <span ng-show="myForm.username.$error.required">Username is required</span>
        
        <br>
        
        <input type="email" name="email" ng-model="user.email" required>
        <span ng-show="myForm.email.$error.required">Email is required</span>
        <span ng-show="myForm.email.$error.email">Invalid Email</span>
        
        <br>

        <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
        <button type="button" ng-click="resetForm()">Reset</button>
    </form>
</div>

JavaScript:

var app = angular.module("myApp", []);

app.controller("FormCtrl", function ($scope) {
    $scope.user = {};

    $scope.resetForm = function () {
        $scope.user = {}; // Reset model values
        $scope.myForm.$setPristine(); // Reset form state
        $scope.myForm.$setUntouched(); // Reset touch state
    };
});

How It Works:

user = {} clears the model values
$setPristine() removes validation errors
$setUntouched() removes the touched state

---

Solution 2: Use $setValidity() to Manually Clear Errors

Sometimes, AngularJS does not update validation states when the form is reset. You can manually clear errors using $setValidity().

Example

$scope.resetForm = function () {
    $scope.user = {}; // Reset the model
    $scope.myForm.$setPristine();
    $scope.myForm.$setUntouched();
    
    // Manually reset validation errors
    angular.forEach($scope.myForm, function (field, key) {
        if (key.indexOf('$') === -1 && field.$setValidity) {
            field.$setValidity("", true);
        }
    });
};

Now, all fields and errors reset properly.

---

Solution 3: Reload the Form Using $scope.$apply() (For Edge Cases)

If $setPristine() and $setUntouched() do not work immediately, force Angular to detect changes with $scope.$apply().

Example

$scope.resetForm = function () {
    $scope.user = {};
    $scope.myForm.$setPristine();
    $scope.myForm.$setUntouched();
    
    $scope.$apply(); // Ensure Angular detects the change
};

This ensures all UI updates reflect immediately.

---

Solution 4: Use ng-if to Reinitialize the Form

If the form still holds validation errors after reset, you can force Angular to destroy and recreate the form using ng-if.

Example

<div ng-if="formVisible">
    <form name="myForm">
        <input type="text" name="username" ng-model="user.username" required>
        <span ng-show="myForm.username.$error.required">Username is required</span>

        <br>
        
        <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
        <button type="button" ng-click="resetForm()">Reset</button>
    </form>
</div>

JavaScript

$scope.formVisible = true;

$scope.resetForm = function () {
    $scope.formVisible = false;  // Remove form from DOM
    $timeout(function () {
        $scope.formVisible = true; // Recreate form
    }, 0);
};

This forces Angular to recreate the form, clearing errors completely.