Using $setPristine() and $setUntouched() for form resets

In AngularJS, $setPristine() and $setUntouched() are two important methods used to reset the state of form controls. These methods are helpful when you want to reset the form’s appearance and behavior to its initial state, typically after a form submission or a user action that requires clearing the form.

Here’s a deep dive into how to use these methods:

1. Understanding $setPristine()

$setPristine() is a method provided by AngularJS to mark a form control as “pristine.” A form control is considered “pristine” if it has not been modified by the user. The method sets the control’s $pristine flag to true and the $dirty flag to false.

$pristine: Indicates whether a form control has been modified by the user.
$dirty: Indicates whether a form control has been modified (i.e., the user has interacted with it).

This is useful when you want to reset the form to its original untouched state and clear any form errors.

Example Usage of $setPristine()

$scope.resetForm = function() {
    $scope.myForm.$setPristine();  // Reset form to pristine state
    $scope.myForm.$setUntouched(); // Reset form to untouched state
};

In this example, calling $setPristine() will mark the form as pristine, which removes the ng-dirty CSS class (if applied) from the form fields. It helps in visually resetting any error states tied to the form’s dirty state.

2. Understanding $setUntouched()

$setUntouched() is a method used to reset the touched state of a form control. A control is considered “touched” if the user has clicked or interacted with the field, even if they didn’t modify its value.

$touched: Indicates whether the user has interacted with the field.
$untouched: The inverse of $touched, set to true if the user has not interacted with the field.

This is especially useful when you want to reset the visual state of the form (e.g., the error messages) after a form has been submitted or reset.

Example Usage of $setUntouched()

$scope.resetForm = function() {
    $scope.myForm.$setPristine();  // Reset form to pristine state
    $scope.myForm.$setUntouched(); // Reset form to untouched state
};

In this case, calling $setUntouched() will reset all controls to the untouched state, which removes the ng-touched class from the form fields and ensures that no error messages are displayed unless the user interacts with the fields again.

3. Resetting the Entire Form

You can use both $setPristine() and $setUntouched() in combination to reset the entire form. This is useful when you want to reset a form after it has been submitted or if the user wants to clear all inputs.

Example: Resetting the Entire Form

Here’s an example of a form with a reset button that clears the form fields, restores the pristine state, and removes any validation errors:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        angular.module('myApp', [])
        .controller('FormController', function($scope) {
            $scope.formData = {}; // Holds form data

            // Handle form submission
            $scope.submitForm = function() {
                if ($scope.myForm.$valid) {
                    alert("Form submitted successfully!");
                } else {
                    alert("Please fill out the form correctly.");
                }
            };

            // Reset the form
            $scope.resetForm = function() {
                $scope.myForm.$setPristine();  // Reset form to pristine state
                $scope.myForm.$setUntouched(); // Reset form to untouched state
                $scope.formData = {};          // Clear form data
            };
        });
    </script>
</head>
<body ng-controller="FormController">
    <form name="myForm" ng-submit="submitForm()" novalidate>
        <label for="username">Username:</label>
        <input type="text" name="username" ng-model="formData.username" ng-required="true" />
        <span ng-show="myForm.username.$error.required && myForm.username.$dirty">Username is required.</span>

        <br/><br/>

        <label for="email">Email:</label>
        <input type="email" name="email" ng-model="formData.email" ng-required="true" />
        <span ng-show="myForm.email.$error.required && myForm.email.$dirty">Email is required.</span>
        <span ng-show="myForm.email.$error.email && myForm.email.$dirty">Invalid email format.</span>

        <br/><br/>

        <!-- Submit Button -->
        <button type="submit" ng-disabled="myForm.$invalid">Submit</button>

        <!-- Reset Button -->
        <button type="button" ng-click="resetForm()">Reset</button>
    </form>
</body>
</html>

4. Explanation of the Code:

$setPristine(): This method will reset the $dirty flag to false, meaning the form control is considered as not modified.
$setUntouched(): This method will reset the $touched flag to false, meaning the form control is considered untouched by the user.
Form reset on button click: The reset button calls the resetForm() function, which calls both $setPristine() and $setUntouched() to clear the form’s state and reset it visually.

5. Use Cases for Form Resetting

After form submission: You may want to reset the form after a successful submission to clear the form and prepare it for new entries.
Cancel button: If you have a cancel button in your form, you might want to reset the form to its initial state when the user clicks it.
User experience: By resetting the form to a pristine and untouched state, you ensure that no error messages are shown unless the user starts interacting with the form again.