Javascript Angular JS 不允许 preventDefault 或 return false 来处理表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14524020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS does not allow preventDefault or return false to work on form submission
提问by Trip
I have a form I'd like to deliver via AJAX :
我有一个表单，我想通过 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
The console.logappears, and immediately it delivers the form.
的console.log出现，并立即将其传递的形式。
It ignores both the e.preventDefault(), and the return false.
它忽略e.preventDefault(), 和return false。
AngularJS reminds me of the honey badger. It just doesn't care.
AngularJS 让我想起了蜜獾。它只是不在乎。
回答by Matei Iorgulescu
I know I am pretty late to the party, but in case you did not figure it out yet, you can keep the action and make sure the form is not actually submitted by passing $eventto the ng-submitfunction. Then you can use event.preventDefault();in your controller after you do all your processing.
我知道我参加聚会已经很晚了，但是如果您还没有弄清楚，您可以保留操作并确保通过传递$event给ng-submit函数来实际未提交表单。然后，您可以event.preventDefault();在完成所有处理后在控制器中使用。
So in your case it would be:
所以在你的情况下，它将是：
<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()
Hope this helps.
希望这可以帮助。
回答by Ben Lesh
Well, you're not doing it the "Angular way". Angular provides a directive called ng-submit, which does that preventDefault for you (as long as you don't have an action attribute specified on your form).
好吧，你不是在用“Angular 的方式”来做这件事。Angular 提供了一个名为 ng-submit 的指令，它为您执行preventDefault （只要您没有在表单上指定 action 属性）。
Markup (with validation!)
标记（带验证！）
<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>
Code
代码
app.controller("MyCtrl", function($scope, $http) {
$scope.sendForm = function (){
$http.post('/Submit/To/Url', $scope.data).success(function(data) {
alert('done!');
});
};
});
回答by bioball
You can get the event by passing $eventinto your ng-click or ng-submit. It's like dependency injection, except in your expressions.
您可以通过传递$event到 ng-click 或 ng-submit来获取事件。这就像依赖注入，除了在你的表达式中。
html
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
回答by Muhammad Raheel
Here is a better solution of all of the other answers.
这是所有其他答案的更好解决方案。
Let suppose you have html5 validation required attribute attached to form elements.
假设您将 html5 验证所需的属性附加到表单元素。
Now
现在
<button ng-submit="Save($event)">SEND ME</button>
And now you function
现在你的功能
$scope.Save = function($event){
$event.preventDefault();
.
. // may be an ajax request
.
return false;
}
This will not only trigger html5 validation but also this will prevent form submission redirect.
这不仅会触发 html5 验证，还会阻止表单提交重定向。
回答by EnZo
Other way to solve this is with a directives.
解决此问题的其他方法是使用指令。
app.directive("submit", [function () {
return {
scope: {
submit: "="
},
link: function (scope, element, attributes) {
element.bind("submit", function (loadEvent) {
return scope.submit(loadEvent);
});
}
}
}]);
<form submit="sendForm" method="post" action="/sign_up">
$scope.sendForm = function(e) {
if ($scope.whatever)
return true;
else
return false;
};
