AngularJS防止表单被提交

Question

我做了一个非常简单的表格：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="/assets/libs/angular/angular.js" charset="utf-8"></script>
    </head>
    <body ng-app="app" ng-controller="myCtrl">
        <form  method="post">
            <input type="text" name="name" value="asas">
            <input type="submit" name="name" value="Submit">
        </form>

        <script type="text/javascript">
            angular.module('app', []).controller('myCtrl', [function(){

            }]);
        </script>
    </body>
</html>

我以前没有遇到过这种类型的问题，但是现在当我按下提交按钮时，角会阻止表单被提交。

我试图在表单中添加novalidate属性，但一直到没有机会为止。

还尝试使用ng-submit手动提交表单，但它不起作用。

我使用的是AngularJS v1.5.8

Answer 1

您的表单需要有目的地才能提交表单。例如，在action属性中，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="/assets/libs/angular/angular.js" charset="utf-8"></script>
    </head>
    <body ng-app="app" ng-controller="myCtrl">
        <form  method="post" action="/form-destination">
            <input type="text" name="name" value="asas">
            <input type="submit" name="name" value="Submit">
        </form>
    </body>
</html>

如果没有向表单提交的目的地，则无法工作。

Answer 2

您应该在控制器中添加一个submit函数，以判断应该采取什么操作。并在表单中添加一个ng-submit，以使该函数具有留置权。因此，当您单击submit按钮时，将调用ng-submit中的函数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="/assets/libs/angular/angular.js" charset="utf-8">  </script>
</head>
<body ng-app="app" ng-controller="myCtrl">
    <form ng-submit="submit()">
        <input type="text" name="name" value="asas">
        <input type="submit" name="name" value="Submit">
    </form>

    <script type="text/javascript">
        angular.module('app', []).controller('myCtrl', ['$scope', function($scope){
            $scope.submit = function(){
                // your submit process
            }
        }]);
    </script>
</body>

​