3

从一位开发人员那里继承项目后，这仍然是我使用 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

非常感谢

4

3 回答 3

2

该表单将出现在其名称下的正确范围内，即$scope.signupForm. 此外，填充表单的对象是$scope.user. 在您的控制器中，执行以下操作：

$scope.user = {}; // or new User() if it is your case
$scope.signupForm.$setPristine();

如果$scope.signupForm是undefined，将控制器直接放在表单上，​​并将上面的代码（以及其他适用的代码）放在这个新控制器中：

<form name="signupForm" novalidate ng-submit="register(user)"
    ng-controller="NewCtrl">

（这可能是由于原始控制器下的范围嵌套而发生的。）

于 2013-09-23T14:31:49.077 回答
1

只需参考这篇文章：

将表单重置为原始状态（AngularJS 1.0.x）

在主要问题中，您参考了有关 AngularJS 的问题和拉取请求。在简历中，您必须对表单使用 $setPristine() 方法。

希望能帮助到你 ！

于 2013-09-23T14:31:24.697 回答
0 

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

于 2017-07-13T00:40:46.790 回答