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方式".Angular提供了一个名为ng-submit的指令,它可以为您阻止默认(只要您没有在表单上指定action属性).

标记(通过验证!)

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

咖啡脚本

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