Question

我有一个普通的HTML表单，其中包含已在Angular控制器中定义的输入，操作等。但是，此表单没有提交按钮。相反，它在页面的其他位置有一个位于表单之外的按钮，但是当单击时应该触发正常的表单提交过程。 换句话说，让外部按钮作为普通提交按钮。

例如（我的版本非常简化），

<div ng-controller='sendFormController">
    <form name='my_form' action='/path/to/form_handler.php' method="POST">
        <input type="text" name="form_data" />
    </form>

    <button ng-click='submitForm()">Send Data</button>
</div>

我一直在寻找这个问题的解决方案，但是我能找到的唯一解决方案（对我的思维方式有些苛刻）包括，

有一个隐藏的提交按钮并按下外部按钮触发。
按下外部按钮时，具有执行$ http.post（）等的代码。我不想在函数中复制动作，组装参数等。

我假设在Angular中必须有一种方法来简单地触发表单的提交，但我无法在文档中找到它。任何人都可以指出我想要的方向吗？

Answer 1

在sendFormController，

$scope.submitForm = function() {
    document.getElementById('my_form').submit(); //force to submit the form after clicking the button
}

和

<form name='my_form' id='my_form' action='/path/to/form_handler.php' method="POST">

Answer 2

我认为以有棱角的方式做得更好：

app.controller('sendFormController', function($scope) {
       $scope.model = { 
          form_data: ''
       };

       $scope.submitForm = function () {
          $http({
              url: '/path/to/form_handler.php',
              method: "POST",
              data: $.param($scope.model),
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
              }
          });
        };
});

HTML：

<div ng-controller='sendFormController">    
    <input type="text" ng-model="model.form_data" />  

    <button ng-click='submitForm()">Send Data</button>
</div>

Answer 3

使用此：

     <form onsubmit='this.submit()' name='my_form' action='/path/to/form_handler.php' method="POST">

或更多“角度”方式：

     <form #form (submit)='form.submit()' name='my_form' action='/path/to/form_handler.php' method="POST">

使用角度提交常规表格

3 个答案: