AngularJS:在提交时重置表单

时间:2016-02-09 20:29:32

标签: javascript angularjs forms

我使用AngularJS表单作为联系表单,并希望在成功提交时重置表单。我已经找到了很多关于如何重置AngularJS表单的例子,并且有这样的工作,但是,我一直无法找到在提交时成功重置表单的方法。我的reset()函数清除表单字段,并且在提交时调用时似乎将表单的状态设置回pristine,但是,仍然会显示仅在字段无效时显示的消息。

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

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

完整代码可在下方或Plunker

找到



<!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>
&#13;
System.exit(0)
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

你可以在ng-submit指令内放置你想要运行的函数 - 这似乎与重置按钮一样执行:

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

答案 1 :(得分:1)

尝试以下操作,添加ng-submit

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

它对我有用。

您的按钮现在应该如下所示

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

希望这会有所帮助。

答案 2 :(得分:1)

我还发现,如果您仍想使用表单提交而不是ng-submit事件,则需要将表单清除代码包装在$timeout函数中。这会强制你在$ timeout内执行的代码同步执行&#39;任何其他事件动作(在这种情况下是表单提交)。

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