清除所有输入并在单击时恢复.ng-pristine
清除所有输入并在单击时恢复.ng-pristine
提问于 2013-09-23 22:23:33
这仍然是我从一位开发人员那里继承项目后使用AngularJS的第一天。我想知道，我的界面上有一个登录/注册表单，一旦提交项目/表单，它就会隐藏起来。现在，一旦用户提交，是否有一种正确或适当的方法来清除其条目的形式，并恢复条目上的.ng-pristine类。这样做的原因是，如果用户选择注销，然后再次登录(或者另一个用户希望注册)，表单就会被填充，并且已经应用了验证css。我不想要这个，我希望所有的东西都是空的，没有CSS应用。
我可以在JavaScript中做到这一点(显然)，但是由于AngularJS是一种不同的方法，我想知道是否应该用另一种方法来解决这个问题，而不是遍历表单项并将类附加到每个项，同时清除它的值。
这是我的一个表单的示例
<form name="signupForm" novalidate ng-submit="register(user)">
<div><label for="email">email:</label><input type="email" id="email" name="email" required ng-model="user.email" ng-minlength=4></div>
<div><label for="userName">Username:</label><input type="text" name="userName" id="userName" ng-model="user.userName" required ng-pattern="/^[A-Za-z0-9 \-_.]*$/" ng-minlength=4></div>
<div><label for="firstName">Vorname:</label><input type="text" name="firstName" id="firstName" ng-model="user.firstName" required ng-pattern="/^[A-Za-z \-_.]*$/" ng-minlength=3></div>
<div><label for="lastName">Nachname:</label><input type="text" name="lastName" id="lastName" ng-model="user.lastName" required ng-pattern="/^[A-Za-z \-_.]*$/" ng-minlength=4></div>
<div><label for="password1">Passwort:</label><input type="password" name="password1" id="password1" ng-model="user.password1" required ng-minlength=4></div>
<div><label for="password2">Passwort wiederholen:</label><input type="password" name="password2" id="password2" ng-model="user.password2" valid-password2 ng-minlength=4 pw-check="password1"></div>
... and so on非常感谢
Stack Overflow用户
发布于 2017-07-13 08:40:47
var app = angular.module('App', []);
app.controller('formController', function($scope, $document){
$scope.Clear = function(){
angular.forEach(angular.element($document[0].querySelectorAll('input[type=text], input[type=email], input[type=password]')), function (elem, index) {
elem.value = '';
/*
Just extra do something
elem.parent().parent().removeClass('has-error has-success');
elem.parent().parent().children().find('span').removeClass('glyphicon-exclamation-sign glyphicon-ok');
*/
});
$scope.myForm.$setPristine();
}
});<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
</head>
<body ng-app="App">
<div ng-controller="formController">
<form name="myForm">
<input type="text" name="FirstName" ng-model="FN"/> <br>
<input type="text" name="LastName"/>
<br>
<input type="text" name="UserName"/>
<br>
<input type="password" name="Password"/>
</form>
<button ng-click="Clear()">Clear</button>
</div>
</body>
</html>
这是我的例子，我使用angularjs 1.6，它对我很有效
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18961772
复制相关文章
相似问题
腾讯云开发者
