清除所有輸入並恢復.ng-pristine點擊

從同伴開發者繼承項目後，它仍然是我使用AngularJS的第一天。我想知道，我的界面上有一個登錄/註冊表單，一旦提交了項目/表單，就會隱藏起來。現在，一旦用戶提交了有正確或正確的方式來清除它的條目的形式，並恢復項目上的.ng-pristine類。原因是用戶應該選擇註銷然後再次登錄（或另一個用戶希望註冊）表單已填充並且已經應用驗證css。我不想要這個，我希望一切都是空的，沒有應用CSS。清除所有輸入並恢復.ng-pristine點擊

我可以在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

非常感謝

來源

2013-09-23 Mike Sav

使用$ setPristine（）和清除模型 –

只是參考這篇文章：

Reset form to pristine state (AngularJS 1.0.x)

在主要問題你有提到的問題和對AngularJS提出請求。在簡歷中，你必須使用$ setPristine（）方法到你的表單。

希望它有幫助！

來源

2013-09-23 14:31:24

該表格將出現在其名稱正確的範圍內，即$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-23 14:31:49

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-13 00:40:46

清除所有輸入並恢復.ng-pristine點擊

回答

相關問題