如何在 angularjs 中重置表单？答案

【问题标题】：How do I reset a form in angularjs?如何在 angularjs 中重置表单？
【发布时间】：2015-07-23 11:04:08
【问题描述】：

见小提琴：http://jsfiddle.net/hejado/7bqjqc2w/

我正在尝试使用 angular 来 form.reset() 我的表单。

HTML：

<div ng-controller="formCtrl">
<form name="resetme" id="resetme">
    <input ng-model="text" type="text" />
    <input file-model="file" type="file" />
    <button type="button" ng-click="resetForm()">reset</button>
</form>
</div>

JS：

.controller('formCtrl', function($scope) {
    $scope.resetForm = function() {
    //$scope.resetme.reset();
    document.getElementById('resetme').reset();
    };
});

请注意：我正在使用这种表单来 ajax 上传文件。该页面没有刷新，我不想使用任何重置按钮。（为了简单起见，我在小提琴中使用了一个。）我想在文件上传完成后调用重置函数（通过 http 成功）。

我正在使用

<input type="file" />

所以我不能为所有输入重新分配空值，因为文件输入是只读的。

在 DOM 元素上调用 reset() 函数是可行的，但有人告诉我以 Angular 与 DOM 对话会很糟糕，所以...

我想知道，这将如何以角度方式完成。我尝试命名表单并通过 $scope.formname 引用它，但我无法调用 Web API 函数...（注释行）

我怎样才能做到这一点？

更新在阅读了一些答案后，我应该明确一点，我正在使用 ngModel 和自定义指令 fileModel 来获取文件对象。

一些解决方案在重置输入字段的值时起作用，但模型没有被清除（文件和文本都没有）。自定义指令就是这个问题的答案，但这有点超出了这个问题的范围。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

几年前我写过关于this topic 的文章。我不知道 Angular 团队是否已经实现了原生表单重置指令，但您可以自己实现。此实现有几个注意事项：它仅适用于一个模型（如果您需要支持更多，请参阅后续post）以及何时初始化原始值的问题。此外，我从未使用文件输入对此进行过测试，因此我不确定它是否适用于这些。

为此有一个issue，但由于不活动而关闭。：/

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope',
  function($scope) {
    $scope.myModel = {
      foo: 'Boop',
      bar: 'Beep'
    };
    $scope.myModelCopy = angular.copy($scope.myModel);
  }
]);

myApp.directive('resetDirective', ['$parse',
  function($parse) {
    return function(scope, element, attr) {
      var fn = $parse(attr.resetDirective);
      var masterModel = angular.copy(fn(scope));

      // Error check to see if expression returned a model
      if (!fn.assign) {
        throw Error('Expression is required to be a model: ' + attr.resetDirective);
      }

      element.bind('reset', function(event) {
        scope.$apply(function() {
          fn.assign(scope, angular.copy(masterModel));
          scope.form.$setPristine();
        });

        // TODO: memoize prevention method
        if (event.preventDefault) {
          return event.preventDefault();
        } else {
          return false;
        }
      });
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    <form reset-directive="myModel" name="form">
      <input type="text" ng-model="myModel.foo" />
      <input type="text" ng-model="myModel.bar" />
      <input type="reset" value="Reset" />
      <pre>myModel: {{ myModel | json }}</pre>
      <pre>myModelCopy: {{ myModelCopy | json }}</pre>
      <pre>form pristine: {{ form.$pristine }}</pre>
    </form>
  </div>
</body>

【讨论】：

【解决方案2】：

你可以试试：

<a href="#" ng-click="resetForm()">reset</a>

$scope.resetForm = function(form) {
  //Even when you use form = {} it does not work
  form.fieldA = null;
  form.fieldB = null;
  ///more fields
}

或者

$scope.resetForm = function(form) {
      //Even when you use form = {} it does not work
      angular.copy({},form);
    }

See Demo

【讨论】：

【解决方案3】：

您希望将 ng-model 附加到每个输入字段，然后通过 $scope 将它们清空。要么做一个自定义指令

【讨论】：

我看到你file 在发布后输入警告，所以你是对的，使用 ng-model 可能是个问题。我认为您仍然可以使用自定义指令，您可以通过元素参数访问表单的 DOM，并且仍然以“角度方式”进行操作。我还看到了一个可能有所帮助的相关堆栈线程：stackoverflow.com/questions/17922557/…

【解决方案4】：

我刚刚遇到了表单未重置的类似问题。这就是我要做的：

在您的 resetform() 函数中，我将包含将您的输入中的两个 ng-model 设置为“”的语句。例如：

**HTML**
 <input ng-model="text" type="text" />
 <input file-model="file" type="file" />
**JS**
.controller('formCtrl', function($scope) {
    $scope.resetForm = function() {
    $scope.text = "";
    $scope.file = null;
    };
});

不确定这是否适用于文件模型，但我确定它会删除文本。祝你好运！

【讨论】：

【解决方案5】：

如果您不想使用 ng-model 和正确的重置类型的按钮，您可以使用此代码，但这不是重置表单的正确角度方式，但它会起作用

$scope.reset = function(){
    $('form').children('*').each(function(){
      $(this).val('');
    });
  }

这是Plunker

【讨论】：

是的，它可以工作，但不幸的是它没有清除任何 ng-models... 添加 ng-model="text" 到输入和 {{text}} 到视图。重置会删除输入，但不会删除模型...
他没有使用 ng-model 他说这不是我发布此解决方案的原因，否则如果他将使用 ng-model 那么也需要清除。

【解决方案6】：

要重置表单数据，请使用以下代码：

    $scope.resetEmployeeData = function() {

    $scope.employeeCred.userName = '';
    $scope.employeeCred.employeeNo = '';
    $scope.employeeCred.sapNo = '';
    $scope.employeeCred.emailD = '';
    $scope.employeeCred.mobileNo = '';
    **this**.createEmployee.$setPristine();
    **this**.createEmployee.$setUntouched();

};

使用 this 而不是 $scope。

【讨论】：

this.fromName.$setPristine(); this.fromName.$setUntouched();