如何在AngularJS中停止表单提交

时间:2018-04-25 05:56:42

标签: angularjs angularjs-forms

你可能会惊讶我为什么要这样做,但这是必要的。我无法解决,所以请你帮助我......如果是的话,那就去吧!

  

我有表单,我希望如果点击提交,就会生成一个停止表单提交的操作/事件,并告诉我您的表单没有提交。那就是它。

这是我的表格:

<body onload=startTime()>
<div id=txt></div>
<meta content="width=device-width,initial-scale=1"name=viewport>
<link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet>

<div class=icon-bar>
<a href=Subpages/PC/pc.html><i class="fa fa-desktop"></i><span>link</span></a>
<a href=Subpages/Laptops/laptops.html><i class="fa fa-laptop"></i><span>link</span></a>
<a href=Subpages/Software/software.html><i class="fa fa-windows"></i><span>link</span></a>
<a href=Subpages/CoolStuff/coolstuff.html><i class="fa fa-smile-o"></i><span>link</span></a>
<a href=Subpages/About/About.html><i class="fa fa-question-circle-o"></i><span>link</span></a>
</div>

这是AngularJS控制器:

<div ng-app="myApp" ng-controller="myCtrl">

    <form>
        First Name: <input type="text" ng-model="firstName" required><br>
        Last Name: <input type="text" ng-model="lastName" required><br>

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

</div>

如果我问的是无关紧要的事情,我感到很遗憾,但我认为现在无法实现这一目标。

感谢。

2 个答案:

答案 0 :(得分:3)

未经测试,您可以尝试更换

的提交按钮
<button ng-click="submit($event)">Submit form</button>

然后在你的控制器中:

$scope.submit = function($event) {
  $event.preventDefault();
}

如果不使用默认表单提交,您可以访问该事件并控制是否继续使用。

答案 1 :(得分:0)

AngularJs公开了在提交表单时应该使用的NgSubmit指令

<form ng-submit="submit()">
    First Name: <input type="text" ng-model="firstName" required><br>
    Last Name: <input type="text" ng-model="lastName" required><br>

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

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {

        $scope.submit = function() {
            //do your thing
        };

    });
</script>

警告:请勿结合使用ng-click和ng-submit