AngularJS form remains $dirty setting every input $pristine manually

Question

I have a HTML form[name="mainForm"] with many inputs. When I modify an input the $scope.mainForm.$dirty becomes true (and that's right) but when I setPristine() a field I have previously modified ($scope.mainForm.firstName.$setPristine()) the whole form keeps in the $dirty state - ($scope.mainForm.$dirty is true).

I wish to know where I'm doing wrong.

http://plnkr.co/edit/4ksaQwyKcEV2BoDbiECz?p=preview

If I input the firstName field and then:

$scope.mainForm.firstName.setPristine();

the whole form should be $pristine because firstName was the only field that was modified but $scope.mainForm.$dirty is true.

Looks similar to this

Pankaj Parkar
– Pankaj Parkar

2016-02-03 10:55:48 +00:00
Commented Feb 3, 2016 at 10:55 — Pankaj Parkar
– Pankaj Parkar, Commented Feb 3, 2016 at 10:55

Harsha Attray · Accepted Answer · 2016-02-03 11:29:53Z

What you need to do is to clear the model completely on clicking set pristine .Try applying the changes listed below in your app.js

set $scope.pristine = {} and on click set the model equalto $scope.pristine this will clear the model and set it to pristine.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.pristine = {};
  $scope.sendForm = function() {
    alert('form sent');
  };
  $scope.getClass = function(b) {
    return b.toString();
  }
  $scope.mp = function() {
    $scope.person = angular.copy($scope.pristine);
  }
});

/* Put your css in here */

.pristine.true, .dirty.true, .invalid.true {
  background: gray;
}
.valid.false {
  background: red;
}
.valid.true {
  background: green; 
}
.error {
  color: red; 
}

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <h3>Demo Form</h3>
  <form name="mainForm" >
    <div>
      <label for="firstName">First Name</label>
      <input id="firstName" name="firstName" type="text" ng-model="person.firstName" required/>
      <span class="error" ng-show="mainForm.firstName.$error.required">required</span>
    </div>
    <div>
      <label for="lastName">Last Name</label>
      <input id="lastName" name="lastName" type="text" ng-model="person.lastName" required/>
      <span class="error" ng-show="mainForm.lastName.$error.required">required</span>
    </div>
    <div>
      <label for="email">Email</label>
      <input id="email" name="email" type="email" ng-model="person.email" required/>
      <span class="error" ng-show="mainForm.email.$error.required">required</span>
      <span class="error" ng-show="mainForm.email.$error.email">invalid email</span>
    </div>
    <div>
      <input type="checkbox" ng-model="agreedToTerms" 
        name="agreedToTerms" id="agreedToTerms" required/>
      <label for="agreedToTerms">I agree to the terms</label>
      <span class="error" ng-show="mainForm.agreedToTerms.$error.required">You must agree to the terms</span>
    </div>
    <div>
      <button type="button" ng-click="sendForm()" >Send Form</button>
      <button type"button" ng-click="mp()">Make Pristine</button>
    </div>
  </form>
  <h3>Viewing the status</h3>
  <p>everything below this point is just to demonstrate what's
  going on in the $scope with validation</p>
  <table>
    <tr>
      <th></th>
      <th>$pristine</th>
      <th>$dirty</th>
      <th>$valid</th>
      <th>$invalid</th>
    </tr>
    <tr ng-repeat="field in ['firstName', 'lastName', 'email', 'agreedToTerms']">
      <td>{{field}}</td>
      <td ng-class="getClass(mainForm[field].$pristine)" class="pristine"></td>
      <td ng-class="getClass(mainForm[field].$dirty)" class="dirty"></td>
      <td ng-class="getClass(mainForm[field].$valid)" class="valid"></td>
      <td ng-class="getClass(mainForm[field].$invalid)" class="invalid"></td>
    </tr>
    <tr>
      <td>mainForm</td>
      <td ng-class="getClass(mainForm.$pristine)" class="pristine"></td>
      <td ng-class="getClass(mainForm.$dirty)" class="dirty"></td>
      <td ng-class="getClass(mainForm.$valid)" class="valid"></td>
      <td ng-class="getClass(mainForm.$invalid)" class="invalid"></td>      
    </tr>
  </table>
</body>
</html>

Props for all the effort on this example, but it appears that it does not remedy the OP's problem. I'm running your snippet and never see the form made pristine.

Collectives™ on Stack Overflow

AngularJS form remains $dirty setting every input $pristine manually

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related