Question

我有一个表单，我想抓住它提交，检查数据验证，然后将表单提交到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>

和我的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);});
        }


    };
});

Answer 1

你应该：

使用表单上的ng-submit指令
将表单元素传递给您的save()方法
使用$http服务发布

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>

Answer 2

我真的建议你从开始到结束都遵循这个文档的页面，你将使用AngularJS改变你的表单方法:)

https://docs.angularjs.org/guide/forms

Answer 3

使用ng-submit代替表单元素

“此外，它会阻止默认操作（表单意味着将请求发送到服务器并重新加载当前页面），但前提是表单不包含操作，数据操作或x操作属性。”< / p>

如果本机html5验证有效，它也只会运行表达式

angularjs获得表单行动并提交给它

3 个答案: