How to Reset Form Using AngularJS setPristine

In AngularJS, resetting a form can mean resetting its interaction state, changing the values bound to its fields, or doing both. Call the form controller’s $setPristine() method to mark the form and its controls pristine again. This does not mark them untouched and does not change their model values. Update the model separately when the reset should clear or restore what the user entered.

Understand pristine state, dirty state, and the model value

$setPristine() is a method; $pristine and $dirty are Boolean state properties on a form or control. A form begins pristine. When a user changes a control, AngularJS marks that control and its parent form dirty. Calling $setPristine() resets pristine/dirty state, but it does not restore the original values or clear the model.

Touched state is separate: $touched and $untouched describe whether a control has been blurred, while pristine/dirty describes whether its value has changed. $setPristine() does not reset touched state. If the task also requires controls to be untouched, call the form’s $setUntouched() method separately; otherwise, leave touched state alone.

A named form controller is published on the containing scope under the form’s name. The example below uses controller-as syntax for the application controller (vm) and accesses the form controller as $scope.profileForm. Bind inputs with ng-model, and use the same model property when clearing or restoring a field.

Reset form state with $setPristine()

This browser-source illustration wires the form, buttons, controller, and named form controller together. It assumes AngularJS is loaded by the page. The first button preserves the current field value while resetting form state; the second clears the model and then resets the state.

<div ng-app="myApp" ng-controller="FormController as vm">
  <form name="profileForm">
    <label>
      Name
      <input name="name" ng-model="vm.profile.name">
    </label>
    <button type="button" ng-click="vm.resetState()">Mark form pristine</button>
    <button type="button" ng-click="vm.clearAndReset()">Clear and reset</button>
  </form>
</div>
<script>
  angular.module('myApp', []).controller('FormController', function ($scope) {
    var vm = this;
    vm.profile = { name: 'Ada' };
    vm.resetState = function () {
      $scope.profileForm.$setPristine();
    };
    vm.clearAndReset = function () {
      vm.profile.name = '';
      $scope.profileForm.$setPristine();
    };
    vm.restoreAndReset = function () {
      vm.profile.name = 'Ada';
      $scope.profileForm.$setPristine();
    };
  });
</script>

The handler is defined on the same vm instance named by ng-controller, and each button calls a defined method. AngularJS makes the named form controller available on $scope after the form is linked, so the click handler can call $scope.profileForm.$setPristine(). resetState() leaves vm.profile.name unchanged. clearAndReset() changes that model property before resetting form state. The separate restoreAndReset() method shows how to restore a saved value; call it from a button or other application action when needed.

Clear or restore the model value separately

Resetting interaction state and changing a field value are independent operations. To preserve the current value, call $setPristine() without assigning to the model. To clear it, assign an empty string to the bound property; to restore it, assign the saved value. When both the value and interaction state should reset, update the model and call $setPristine() as shown in the corresponding handler above.

The following standalone JavaScript simulation illustrates those two actions without requiring AngularJS in the runtime. It models only the state and value changes; it is not an AngularJS form implementation.

Run this example:

const form = {
  $dirty: true,
  $pristine: false,
  $setPristine() {
    this.$dirty = false;
    this.$pristine = true;
  }
};
const model = { name: 'Ada' };
model.name = '';
form.$setPristine();
console.log(JSON.stringify({ name: model.name, pristine: form.$pristine, dirty: form.$dirty }));

{"name":"","pristine":true,"dirty":false}

In this simulation, assigning model.name = '' clears the value, and $setPristine() changes only the modeled interaction flags. To simulate preserving the value, omit the assignment. To simulate restoring a saved value, assign that value before resetting the flags. In an AngularJS application, use the actual model property and form controller shown in the browser-source example.

Verify the behavior and avoid common mistakes

After the handler runs, inspect the named form’s $pristine and $dirty properties and check vm.profile.name separately. With resetState(), the form becomes pristine while its current value remains. With clearAndReset(), the value becomes blank and the form becomes pristine. A model assignment on its own does not call $setPristine(), so choose both operations when both outcomes are intended.

Do not treat pristine/dirty and touched/untouched as the same state. Use $setUntouched() only when the task also calls for resetting blur state. Do not call $setPristine a state or use the misspelled $errror property for validation. For a required-field message, check the actual validity property, such as profileForm.name.$error.required. The reset buttons use type="button" so they do not submit the form. This procedure uses AngularJS’s built-in form controller and does not require replacing form directives or overriding controller methods.