我有一个包含许多输入的 HTML form[name="mainForm"]。
当我修改输入时，$scope.mainForm.$dirty变为true(这是正确的)，但是当我setPristine()我之前修改过的字段时( $scope.mainForm.firstName.$setPristine()) 整个表单保持在 $dirty 状态 - ($scope.mainForm.$dirty is true)。
我想知道我哪里做错了。
http://plnkr.co/edit/4ksaQwyKcEV2BoDbiECz?p=preview
如果我输入 firstName 字段，然后:
$scope.mainForm.firstName.setPristine();
整个表单应该是$pristine，因为firstName是唯一被修改的字段，但$scope.mainForm.$dirty是true。
最佳答案
您需要做的是在单击 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>关于javascript - AngularJS 表单仍然 $dirty，手动设置每个输入 $pristine，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35174838/