gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:25:19 24 4
gpt4 key购买 nike

我有一个包含许多输入的 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.$dirtytrue

最佳答案

您需要做的是在单击 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com