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

您的表单需要有目的地才能提交表单。例如，在动作属性中，例如：

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

您应该在控制器中放置一个提交函数，告诉Angular应该采取什么操作。并在表单中添加ng-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>

AngularJS可以防止表单被提交

2 个答案: