AngularJS表单保持$ dirty手动设置每个输入$ pristine
[英]AngularJS form remains $dirty setting every input $pristine manually
问题描述
I have a HTML form[name="mainForm"] with many inputs. 
我有一个带有许多输入的HTML form[name="mainForm"] 。 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 ). 当我修改输入时， $scope.mainForm.$dirty变为true（是正确的），但是当我设置了setPristine()字段时，我先前已经修改过（ $scope.mainForm.firstName.$setPristine() ），整个表单会保留在其中$dirty状态-（ $scope.mainForm.$dirty为true ）。
I wish to know where I'm doing wrong. 我想知道我在哪里做错了。
http://plnkr.co/edit/4ksaQwyKcEV2BoDbiECz?p=preview http://plnkr.co/edit/4ksaQwyKcEV2BoDbiECz?p=preview
If I input the firstName field and then: 如果我输入firstName字段，然后：
$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 . 整个表单应该是$pristine因为firstName是唯一被修改的字段，但是$scope.mainForm.$dirty为true 。
1 个解决方案
解决方案1
0 2016-02-03 11:29:53
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 pristine完全清除模型。尝试在app.js中应用下面列出的更改
set $scope.pristine = {} and on click set the model equalto $scope.pristine this will clear the model and set it to pristine. 设置$ 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.