Question

背景

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

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

，否则它不起作用

a）所有表单字段均有效

或

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

示例

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

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

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

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

可能的解决方案

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

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

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

但是这对我来说并不感觉干，因为您不得不从标记中手动重复预定义的ng-model值。而且我的应用程序中也有不少表格，并且不想将其添加到所有控制器......

我想要实现的目标

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

的问题

所以在我开始花时间写一篇精心设计的，最重要的解决方案之前，我想知道我是不是看到了树木的木材，而且实际上很明显溶液

Answer 1

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

Answer 2

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

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

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

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

是否有一种完全重置angularjs形式的通用方法？

3 个答案: