Why does Angular JS form.$pristine not change with direct JS manipulation

Question

I would like to adjust display of form items such as a button's enabled/disabled attribute by testing the Angular JS pristine setting.

When a click event fires the form's pristine value is changed as I would expect but when I manipulate the scope variable directly the form's pristine setting is not changed even though a control on the form is bound to that variable.

Please see the following JSfiddle:

http://jsfiddle.net/nicholasporter/2h7wT/3/

I would expect that the altering of the boolean value would cause the forms pristine setting to change when a control is bound to a scope variable. Is there a better way to test this? Is there a better way to adjust buttons or other DOM elements when nothing has changed on the form? Thanks in advance for any pointers. Here is the code in case the JSfiddle isn't working.

 <div ng-app ng-controller="MyCtrl">
    <form novalidate name="myForm">
    {{myBool}}

      <input type="checkbox" ng-model="myBool" />
      <button ng-click="myBool=!myBool">JS set</button>
        <div>Form Pristine:{{myForm.$pristine}}</div>
    </form>
  </div>


<script>
    function MyCtrl($scope){
        $scope.myBool = false;
    }
</script>

manifests in 1.0.4 as well

Liviu T.
– Liviu T.

2013-02-12 22:29:39 +00:00
Commented Feb 12, 2013 at 22:29 — Liviu T.
– Liviu T., Commented Feb 12, 2013 at 22:29

Jan · Accepted Answer · 2015-05-27 12:39:00Z

28

The $pristine propery of a an input with an ng-model directive only changes when its ngModelControllers $setViewValue() method is used, that is through user interaction on the input element or by calling that method yourself.

This is because the pristine state is used to keep track of wether you changed (modified any ng-model-enabled input elements in) the form. It does not mean that the values in the inputs are equal to the values in the model, they always are updated after every keystroke! There's no automatic way to reset a form to pristine, you have to decide yourself when to do that by calling form.$setPristine().

If you want to reset the pristine information in your example, you have to tell the form to reset itself by binding the button to a function on the scope:

$scope.toggleBool = function() {
  $scope.myBool = !$scope.myBool;
  $scope.myForm.$setPristine();
}

If you want to have a separate set of values for the form and for an object's original state, you have to clone the object and then use the clone in the form. Otherwise all changes always immediately alter the original object.

You can then determine the state of the form by performing a deep comparison between the original object and it's clone.

UPDATE May '15: This answer is from 2013. ngModelController has gained a significantly richer API in recent versions of Angular (currently 1.4), that offers some mechanisms for managing form state.

edited May 27, 2015 at 12:39

answered Feb 15, 2013 at 14:15

Jan

1,0209 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Elise Chant Over a year ago

I'm sorry, what is the snippet with $setViewValue()?

Jan Over a year ago

@EliseChant Sorry, I don't understand your question. Can you elaborate?

Elise Chant Over a year ago

@Jan sorry, not directly related to resetting pristine

JiniKJohny Over a year ago

@Jan, could you please add a sample fiddle application

downhand Over a year ago

$scope.myForm.$setDirty(); is probably what the OP was looking for (and so was I), your idea resolved my problem, +1.

Collectives™ on Stack Overflow

Why does Angular JS form.$pristine not change with direct JS manipulation

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related