如何在 AngularJS 中停止表单提交答案

【问题标题】：How to stop form submission in AngularJS如何在 AngularJS 中停止表单提交
【发布时间】：2018-10-05 11:56:42
【问题描述】：

您可能会惊讶我为什么要这样做，但这是必须的。我无法解决，请您帮帮我。如果可以，我们走吧！

我有一个表单，我希望如果我点击提交，应该生成一个动作/事件来停止表单提交，并告诉我你的表单未提交。就是这样。

这是我的表格：

<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>

这是 AngularJS 控制器：

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

        // Execute form submission
        // handle data and prevent redirect

    });
</script>

如果我问了一些不相关的问题，我很遗憾，但我认为可以做到，而我目前无法做到。

谢谢。

【问题讨论】：

默认情况下 AngularJS 会停止表单提交，除非你的表单有一个 action 属性，在这种情况下它没有。既然你知道了，你能澄清你的问题吗？

标签： angularjs angularjs-forms

【解决方案1】：

未经测试，您可以尝试将提交按钮换成

<button ng-click="submit($event)">Submit form</button>

然后在你的控制器中：

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

通过不使用默认表单提交，您可以访问事件并控制是否继续。

【讨论】：

谢谢，正是我需要的。支持我的问题:-)

【解决方案2】：

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

【讨论】：