How can I do validation and use ..$setPristine(); in an AngularJS form?

Question

I have the following code:

            <form class="form"
                  data-ng-submit="modalSubmit(modal.data)"
                  id="modal-body"
                  name="modalForm"
                  novalidate>

This works and when I click on a button of type submit then the modalSubmit function is called.

However I would like to do this in my controller:

$scope.modalForm.$setPristine();  

But it gives an error saying:

has no method '$setPristine'

How I can I set the form to pristine? I did try adding data-ng-form="modalForm" but then I get a message saying something to the effect of duplicate directive names.

I tried changing the form element to a DIV but then the clicking on the submit button does not call the function

Here's an example (modified from another user) that shows what I am trying to do which is set values to pristine:

plnkr.co/edit/LNanJdAggMLIgxii0cfv?p=preview

Answer 1

You're not doing anything wrong there, only problem is you're referencing an old version of angular in which $setPristine() was not a feature. $setPristine() was added in 1.1.+, so reference a newer version of angular and you're good to go. See it working in this plunk, using 1.2.+.

If you can't upgrade, then a dirty workaround would be to loop through all inputs in the form and set their $dirty and $pristine values manually:

$scope.mp = function() {
  $scope.mainForm.$pristine=true;//clean main form
  $scope.mainForm.$dirty=false;
  angular.forEach($scope.mainForm,function(input){//clean all input controls
    if (input !== undefined && input.$dirty !== undefined) {
      input.$dirty=false;
      input.$pristine=true;
    }
  });
}