AngularJS：提交时重置表单答案

【问题标题】：AngularJS: Reset form on submitAngularJS：提交时重置表单
【发布时间】：2016-02-09 20:29:31
【问题描述】：

我正在使用 AngularJS 表单作为联系表单，并希望在成功提交后重置表单。我找到了很多关于如何重置 AngularJS 表单并使其正常工作的示例，但是，我一直无法找到在提交时成功重置表单的方法。我的 reset() 函数会清除表单字段，并在提交时将表单的状态设置回原始状态，但是，仍会显示应仅在字段无效时显示的消息。

这是我的控制器代码与功能...

function ContactCtrl() {
  var vm = this;
  vm.reset = reset;
  vm.submit = submit;


  function reset(form) {
    if (form) {
      vm.name = undefined;
      vm.email = undefined;
      form.$setValidity();
      form.$setPristine();
      form.$setUntouched();
    }
  }

  function submit(form) {
    if (form) {
      vm.reset(form);
    }
  }
}

完整的代码可以在下面或Plunker上找到

angular
  .module('plunker', [])
  .controller('ContactCtrl', ContactCtrl);

function ContactCtrl() {
  var vm = this;
  vm.reset = reset;
  vm.submit = submit;


  function reset(form) {
    if (form) {
      vm.name = undefined;
      vm.email = undefined;
      form.$setValidity();
      form.$setPristine();
      form.$setUntouched();
    }
  }

  function submit(form) {
    if (form) {
      vm.reset(form);
    }
  }
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="ContactCtrl as contact">
  <form name="form" novalidate>
    Name:
    <input type="text" ng-model="contact.name" name="uName" required="" />
    <br />
    <div ng-show="form.$submitted || form.uName.$touched">
      <div ng-show="form.uName.$error.required">Tell us your name.</div>
    </div>

    E-mail:
    <input type="email" ng-model="contact.email" name="uEmail" required="" />
    <br />
    <div ng-show="form.$submitted || form.uEmail.$touched">
      <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
      <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
    </div>

    <input type="button" ng-click="contact.reset(form)" value="Reset" />
    <input type="submit" ng-click="contact.submit(form)" value="Submit" />
  </form>
  <pre>
    FORM:
    form.$pristine = {{form.$pristine}}
    form.$dirty = {{form.$dirty}}
    form.$submitted = {{form.$submitted}}
    
    NAME:
    form.uName.$pristine = {{form.uName.$pristine}}
    form.uName.$dirty = {{form.uName.$dirty}}
    form.uName.$valid = {{form.uName.$valid}}
    form.uName.$invalid = {{form.uName.$invalid}}
    
    EMAIL:
    form.uEmail.$pristine = {{form.uEmail.$pristine}}
    form.uEmail.$dirty = {{form.uEmail.$dirty}}
    form.uEmail.$valid = {{form.uEmail.$valid}}
    form.uEmail.$invalid = {{form.uEmail.$invalid}}
    
  </pre>
</body>

</html>

【问题讨论】：

这可能是因为在你重置表单后，会触发字段上的模糊事件并触发表单验证。
这也是我注意到的。但是，如果您的表格有效，则它可以正常工作；如果表单中有错误，验证运行并且不会触发ngClick。

标签： javascript angularjs forms

【解决方案1】：

您可以将要在提交时运行的函数放在ng-submit 指令中，这似乎与重置按钮一样执行：

<form name="form" ng-submit="contact.submit(form)">

【讨论】：

谢谢！这就是我的解决方案。

【解决方案2】：

尝试以下，添加 ng-submit

<form name="form" novalidate ng-submit="contact.submit(form)">

它对我有用。

您的按钮现在应该是这样的

 <input type="submit"  value="Submit" />

希望这会有所帮助。

【讨论】：

【解决方案3】：

我还发现，如果您仍想使用表单提交而不是 ng-submit 事件，则需要将表单清除代码包装在 $timeout 函数中。这会强制您粘贴在 $timeout 中的代码与任何其他事件操作“同步”执行（在本例中为表单提交）。

Modified Plunkr seen here

angular
  .module('plunker', [])
  .controller('ContactCtrl', ['$scope','$timeout', ContactCtrl]);

function ContactCtrl($scope, $timeout) {
  var vm = this;
  vm.reset = reset;
  vm.submit = submit;
  vm.resetMe = resetMe;


  function reset($event, form) {
    if ($scope.form) {
      $timeout(function(){
        vm.name = undefined;
        vm.email = undefined;
        $scope.form.$setValidity();
        $scope.form.$setPristine();
        $scope.form.$setUntouched();        
      });
    }
  }

  function submit(form) {
    if (form) {
      vm.reset(form);
    }
  }

  function resetMe(){
    console.log($scope);
    debugger;
    $scope.form.$setPristine();
  }
}

【讨论】：

不错！这就说得通了。谢谢。