有没有一种通用的方法来完全重置 angularjs 表单？答案

【问题标题】：Is there a generic way to completely reset an angularjs form?有没有一种通用的方法来完全重置 angularjs 表单？
【发布时间】：2014-11-21 17:32:14
【问题描述】：

背景

我正在尝试找到一种可靠、通用的方法来将表单重置为其原始的干净状态。

angularjs 文档中有一个基本示例，这似乎被认为是清除表单的事实上的方法（我也看到在其他地方重复了同样的方法）。问题是，它不起作用，除非：

a) 所有表单字段均有效

或

b) 您预先为所有表单输入模型值定义默认值

示例

我将使用 angularjs 文档中的实际形式作为示例：

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

如果您滚动到第一个表单，填写名称字段，然后使用无效值填写电子邮件输入，您将看到（可以理解）“电子邮件”属性永远不会分配给模型。如果您然后单击“重置”按钮，您会看到名称输入被重置为空白，但电子邮件输入保持不变。

因此，您似乎无法可靠地使用此方法，因为它仅在所有字段实际有效时才完全重置表单。

可能的解决方案

一种解决方案是为每个表单预先定义一个默认模型，然后使用它来重置表单。

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

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

但这对我来说并不枯燥，因为您必须从标记中手动重复预定义的 ng-model 值。而且我的应用程序中也有很多表单，我不想将它添加到所有控制器中......

我想要实现的目标

除了使用$setPristine()和$setUntouched()重置表单的状态外，我还需要完全重置表单模型数据，以便所有输入都重置为原始状态。

问题

所以在我开始花时间写一个详细的、最重要的解决方案之前，我想知道我是不是只见树木不见森林，实际上有一个明显的解决方案？

【问题讨论】：

标签： angularjs

【解决方案1】：

为模型提供初始或预定义状态值不会违反 DRY 原则。在我看来，让模型状态代表表单的每个定义状态是一个很好的做法，即：工作（模型）、主（初始值）、空白（所有字段都空白）。因此，您首先设置 $scope.working = master，然后根据用户请求将表单设为空白，您只需设置 $scope.working = 空白即可。

【讨论】：

感谢您的回答。您误解了我的陈述，我并不是说定义默认模型会破坏 DRY，而是属性和默认值已经存在于一个地方。您必须将它们定义为输入中的 ng-model 属性以使表单验证正常工作，因此将这些属性和值复制到控制器中以创建默认模型就是重复您自己。肯定是更好（可以说是 DRYer）、更不容易出错的解决方案是从表单控件上设置的预先存在的属性生成默认模型/状态？那么任何变化都只会发生在一个地方

【解决方案2】：

$setPristine() 仅重置表单模型值。由于无效的表单字段不会绑定到模型，因此它们不会被重置。您可以使用“重置”类型的按钮来完全清除表单：

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

这也会清除无效的表单域。

【讨论】：

谢谢，但我正在寻找一种编程方式来重置表单

【解决方案3】：

试试这个代码，它会将您的表单重置为上次保存的更改

<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>

【讨论】：