angularjs - 单击时清除所有输入并恢复 .ng-pristine

Question

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

非常感谢

Answer 1

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

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

如果 $scope.signupForm 是 undefined，将 Controller 直接放在表单上，​​并将上面的代码(以及任何其他适用的代码)放在这个新 Controller 中:

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

(这可能是由于作用域嵌套在您的原始 Controller 下而发生的。)