有没有一种通用的方法可以完全重置angularjs表单？

背景

我正试图找到一种可靠的通用方法，将表单重置回原始的干净状态

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

a） 所有表单字段都有效

或

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

示例

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

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

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

可能的解决方案

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

但我觉得这并不枯燥，因为您必须手动重复标记中预定义的ng模型值。我的应用程序中也有很多表单，我不想把它们添加到所有的控制器中

我正在努力实现的目标

除了使用

$setPristine（）

和

$setUntouched（）

重置表单的状态外，我还需要完全重置表单模型数据，以便将所有输入重置为其原始状态

问题

---

因此，在我开始花时间为这个问题编写一个详细的、全面的解决方案之前，我想知道我是否没有看到树的原木，而且实际上有一个明显的解决方案？

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

$setPristine（）

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

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

重置

这也会清除无效的表单字段。

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

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

名称：

电子邮件：

性别：男
女性

angular.module（'formExample'，[]）
.controller（'ExampleController'，['$scope'，function$scope）{
$scope.master={}；
$scope.update=函数（用户）{
$scope.master=angular.copy（用户）；
};
$scope.reset=函数（）{
$scope.user=angular.copy（$scope.master）；
};
$scope.reset（）；
}]);

谢谢您的回答。您误解了我的说法，我并不是说定义默认模型会让人失望，而是属性和默认值已经存在于一个地方。您必须将它们定义为输入上的ng模型属性，以便表单验证工作，因此将这些属性和值复制到控制器中以创建默认模型是重复您自己的操作。一个更好的（可以说是更简单的）、更不容易出错的解决方案是从表单控件上预先存在的属性集生成一个默认模型/状态？然后，任何更改只会在一个位置发生谢谢，但我正在寻找一种编程方式来重置表单

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