Форма AngularJS остается $ грязной, устанавливая каждый ввод $ нетронутый вручную

У меня есть 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.


javascript validation forms angularjs angularjs-validation
person DarKAngeL    schedule 03.02.2016    source источник
comment
Похоже на это   -  person Pankaj Parkar    schedule 03.02.2016

Ответы (1)


arrow_upward
0
arrow_downward

Что вам нужно сделать, так это полностью очистить модель, щелкнув set pristine. Попробуйте применить изменения, перечисленные ниже, в вашем app.js.

установите $scope.pristine = {} и при щелчке установите модель равной $scope.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>

person Harsha Attray    schedule 03.02.2016
comment
Реквизит за все усилия по этому примеру, но похоже, что это не решает проблему ОП. Я запускаю ваш фрагмент и никогда не вижу форму в первозданном виде. - person djmarquette; 13.05.2016