有沒有一種通用的方式來完全重置一個angularjs表單？

背景有沒有一種通用的方式來完全重置一個angularjs表單？

我試圖找到一個可靠的，通用的方法來重置形式返回到它的原始乾淨的狀態。

在angularjs文檔中有一個基本的例子，它似乎被認爲是事實上清除表單的方法（我也看到了在其他地方重複使用的相同方法）。問題是，這是行不通的，除非之一：

a）所有表單字段都是有效的

或

b）你對所有的輸入模式值的定義默認值前面

例

我將在angularjs文檔作爲一個例子使用的實際形式：

https://docs.angularjs.org/guide/forms

如果滾動到第一個表格，填寫姓名字段，然後用無效值的電子郵件輸入填充，你會看到（可以理解）「電子郵件」屬性永遠不會被分配給該模型。如果您再點擊「重置」按鈕，您會看到名稱輸入已重置爲空白，但電子郵件輸入保持不變。

因此，您不能可靠地使用此方法，因爲如果所有字段實際上都是有效的，它只會完全重置表單。

可能的解決方法

一個解決辦法是定義一個默認模型前期的每一個表格，然後用它來重置表單。

http://plnkr.co/edit/WCNC5keMDb8CGcvAt1Lp?p=preview

$scope.master = { 
    name: '', 
    email: ''   
}

但這並不覺得幹我的，因爲你必須從你的標記手動重複預定義的NG-模型值。而我也得到了我的應用程序相當多的形式和不喜歡有將它添加到所有控制器...

我想要實現

藏漢作爲使用$setPristine()和$setUntouched()重置表單的狀態，我還需要完全重置表單模型數據，以便所有輸入都重置爲其原始狀態。

問題

所以，在我走之前關閉，花時間寫一個精心製作的，在上面解決了這個問題，我想知道，如果我沒有看到對樹木不見森林，實際上有明顯的解決方案？

來源

2014-11-21 james

爲模型提供初始或預定義的狀態值不會違反DRY原則。在我看來，讓模型狀態代表你的表單的每個定義狀態是一個很好的做法，例如：working（模型），master（初始值），blank（所有字段消隱）。所以，你首先設置你的$ scope.working = master，然後根據用戶的請求將表單清空，你只需設置$ scope.working = blank即可。

來源

2014-11-21 18:29:17

謝謝您的回答。你誤解了我的陳述，我並不是說定義默認模型會打破DRY，但是屬性和默認值已經存在於一個地方。你*有*定義他們爲您的輸入ng表模型屬性的表單驗證工作，所以複製這些屬性和值到一個控制器來創建一個默認模型重複自己。當然，更好的（可以說是DRYer），更少容易出錯的解決方案將從表單控件上的預先存在的屬性生成默認模型/狀態？然後，任何更改將只發生在一個地方 – james 2014-11-21 19:03:24

$setPristine()僅重置表單模型值。由於無效的表單字段不會綁定到模型，因此不會重置。您可以使用「重置」類型的按鈕來完全清除表單：

<button type="reset" ng-click="reset()">Reset</button>

這也會清除無效的表單域。

來源

2016-02-19 11:59:04 marco

謝謝，但我正在尋找一種編程方式來重置表單 – james 2016-02-19 14:04:12

試試這個代碼，將表單恢復到上次保存的變化

<div ng-controller="ExampleController"> 
    <form novalidate class="simple-form"> 
    <label>Name: <input type="text" ng-model="user.name" /></label><br /> 
    <label>E-mail: <input type="email" ng-model="user.email" /></label><br /> 
    Gender: <label><input type="radio" ng-model="user.gender" value="male" />male</label> 
    <label><input type="radio" ng-model="user.gender" value="female" />female</label><br /> 
    <input type="button" ng-click="reset()" value="Reset" /> 
    <input type="submit" ng-click="update(user)" value="Save" /> 
    </form> 
</div> 

<script> 
    angular.module('formExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
     $scope.master = {}; 

     $scope.update = function(user) { 
     $scope.master = angular.copy(user); 
     }; 

     $scope.reset = function() { 
     $scope.user = angular.copy($scope.master); 
     }; 

     $scope.reset(); 
    }]); 
</script>

來源

2016-11-21 11:34:25

有沒有一種通用的方式來完全重置一個angularjs表單？

回答

相關問題