AngularJS表单重置

一尘不染

AngularJS表单重置

angularjs

我有一个角度复位功能，可以清除表单中的所有字段。如果我做类似的事情：

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

$scope.resetForm = function() {
  $scope.someForm = {};
}

一切正常。但我想将此功能用于网站上的多种表单。如果我像这样传递表单对象：

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

$scope.resetForm = function(form) {
  $scope.form = {};
}

那就行不通了。有人可以向我解释为什么会这样吗？

阅读 215

2020-07-04

共1个答案

一尘不染

您有2个问题：

您没有访问传入的变量，而是仍访问someForm当前作用域。
当您将参数传递给函数时，它通过引用传递。即使在使用时form = {}，它也不起作用，因为它仅更改参数的引用，而不更改传入的引用someForm。

尝试：

$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);
    }

代替：

$scope.resetForm = function(form) {
  $scope.form = {};
}

在您的朋克中，我看到您没有将视图与模型分离。您应该这样做是为了分离关注点，并避免在清除所有字段（包括DOM表单对象的字段）时可能发生的问题。

<form name="form2" ng-controller="SecondController">
      <label for="first_field">First Field</label>
      <input ng-model="form2Model.first_field" />
      <br />
      <label for="second_field">Second Field</label>
      <input ng-model="form2Model.second_field" />
      <br />

      <a href="#" ng-click="secondReset(form2Model)">Reset the form</a>
    </form>

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

2020-07-04