javascript angularjs 获取表单动作并提交给它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25953541/
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
angularjs get form action and submit to it
提问by Tzook Bar Noy
I have a form and I want to catch it submission, check validation of data and than submit form to the action inside the HTML form.
我有一个表单，我想捕捉它的提交，检查数据的验证，然后将表单提交给 HTML 表单内的操作。
<div ng-controller="contactCtrl">
<form action="someAction" method="post" name="contactForm" class="clearfix frmContact">
<div class="one_half">
<input id="txtName" ng-model="name" value="" class="form-control">
</div>
<button ng_click="save($event)" type="submit">Send Message</button>
</form>
</div>
and my js:
和我的js：
var app = angular.module('bloompyApp', []);
app.controller("contactCtrl", function($scope, $http) {
$scope.email = "";
$scope.name = "";
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message = "";};
$scope.save = function(ev) {
ev.preventDefault();
console.log(angular.element(document.querySelector('body')));
if ($scope.contactForm.$valid) {
$http.get("/posts/")
.success(function(response) {console.log(response);});
}
};
});
回答by Zachary Yates
You should:
你应该：
- Use the ng-submitdirective on your form
- Pass the form element to your
save()method - Use the $httpservice to post
var ctrl = function ($scope, $http, $log) {
$scope.save = function (form) {
//if (!$scope.contactForm.$valid) return;
var url = form.attributes["target"];
$log.debug(url);
$http
.post(url, { email: $scope.email, name: $scope.name })
.success(function (response) {
$log.debug(response);
})
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form ng-submit="save($element.action)">
<button type="submit">Send Message</button>
</form>
</div>回答by Sergio Rinaudo
I really advice you to follow this page of the docs from the beginning to the end, you'll change your approach to form using AngularJS :)
我真的建议您从头到尾关注此文档页面，您将使用 AngularJS 更改表单方法:)
回答by Endless
Use ng-submitinstead on the form element
在表单元素上使用ng-submit
"Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes."
“此外，它可以防止默认操作（对于表单意味着将请求发送到服务器并重新加载当前页面），但前提是表单不包含操作、数据操作或 x-action 属性。”
It will also only run the expressions if the native html5 validationis valid
如果本机 html5 验证有效，它也只会运行表达式
