有没有一种通用的方式来完全重置一个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表单？

回答

相关问题