Angular JS不允许preventDefault或return false处理表单提交

Question

我有一个表单，我想通过AJAX提交：

<form class="form-inline ng-pristine" ng-submit="sendForm()" method="post" action="/sign_up" accept-charset="UTF-8">

$scope.sendForm = (e) ->
  e.preventDefault ->
  console.log 'sendForm()'
  return false  

此时将出现console.log，并立即传递表单。

它会忽略e.preventDefault()和return false。

AngularJS让我想起了蜜獾。它就是不在乎。

Answer 1

我知道我来得太晚了，但是如果您还没有弄清楚，您可以保留操作，并通过将$event传递给ng-submit函数来确保表单不是实际提交的。然后，您可以在完成所有处理后在控制器中使用event.preventDefault();。

因此在您的情况下，它将是：

<form class="form-inline ng-pristine" ng-submit="sendForm($event)" method="post" action="/sign_up" accept-charset="UTF-8">

$scope.sendForm = (e) ->
  // doing stuff
  e.preventDefault()

希望这能有所帮助。

Answer 2

好吧，你不是在用“角度”的方式。Angular提供了一个名为ng- preventDefault的指令，它为您提交操作(只要您没有在表单上指定属性)。

标记(带验证！)

<form name="myForm" ng-submit="sendForm()">
  <div>
    <input type="text" name="name" ng-model="data.name" required/>
    <span ng-show="myForm.name.$error.required && myForm.name.$dirty">required</span>
  </div>
  <div>
    <input type="email" name="email" ng-model="data.email" required/>
    <span ng-show="myForm.name.$error.required && myForm.name.$dirty">required</span>
    <span ng-show="myForm.name.$error.email && myForm.name.$dirty">invalid email</span>
  </div>
  <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

代码

app.controller("MyCtrl", function($scope, $http) {
    $scope.sendForm = function (){
       $http.post('/Submit/To/Url', $scope.data).success(function(data) {
           alert('done!');
       });
    };
});

Answer 3

您可以通过将$event传递到ng-click或ng-submit来获取事件。它类似于依赖注入，只是在表达式中有所不同。

html

<form class="form-inline ng-pristine" ng-submit="sendForm($event)" method="post" action="/sign_up" accept-charset="UTF-8">

coffeescript

$scope.sendForm = (e) ->
  e.preventDefault()
  console.log 'sendForm()'
  false