Question

我有一个包含许多输入的HTML form[name="mainForm"]。当我修改输入时，$scope.mainForm.$dirty变为真（这是正确的），但当我setPristine()我之前修改过的字段（$scope.mainForm.firstName.$setPristine()）时，整个表单会保留在$dirty中州 - （$scope.mainForm.$dirty是true）。

我想知道我在哪里做错了。

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

如果我输入firstName字段，然后输入：

$scope.mainForm.firstName.setPristine();

整个表单应为$pristine，因为firstName是唯一已修改但$scope.mainForm.$dirty为true的字段。

Answer 1

您需要做的是在点击设置pristine时完全清除模型。尝试在app.js中应用下面列出的更改

设置$ scope.pristine = {}并点击设置模型等于$ scope.pristine这将清除模型并将其设置为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>

AngularJS表单仍然是$ dirty手动设置每个输入$ pristine

1 个答案: