如何使用angularjs一次性将多个表单数据发送到服务器？答案

【问题标题】：How to send multiple forms data in one shot to server using angularjs?如何使用angularjs一次性将多个表单数据发送到服务器？
【发布时间】：2017-08-10 14:15:18
【问题描述】：

您好，我正在用 angularjs 开发 Web 应用程序。我在一个 html 页面中有两种形式。下面是结构。

<form name="form1">
    <input type="text" name="fname" />
    <input type="text" name="lname" />
    <input type="submit" value="Next" />
</form>

<form name="form2">
    <input type="text" name="address" />
    <input type="text" name="state" />
    <input type="submit" value="Next" />
</form>

单击第一个表单的下一个提交按钮时，我想验证第一个表单，我想滚动到第二个表单并禁用第一个表单。

单击 form2 的下一个提交按钮时，我想验证第二个表单，并且我想使用 $http 从两个表单（form1 和 form2）向服务器提交数据。我可以知道这有可能实现吗？我也可以知道这是我遵循的正确方式还是我与上述要求有关的其他事情？任何建议或帮助将不胜感激。谢谢你。

【问题讨论】：

是的，有可能。您只需要捕获第一个表单的值并在提交第二个表单时，使用 formData 附加您捕获的所有值。
嗨 Vivz。谢谢。单击第一个提交按钮后，我可以验证第一个表单并滚动到第二个表单，最后我能够从两个表单中捕获数据并提交？
如何从多个表单中获取数据？ $scope.modelname?
这两种形式是否都在同一个控制器的范围内？我会建议你将两种形式的所有属性绑定到一个公共对象
是同一个控制器。

标签： javascript angularjs

【解决方案1】：

您可以将所有值绑定到一个公共对象。我在提交第一个表单后启用了第二个表单。在第二种形式的提交功能中，您只需遍历公共对象的值并将其附加到formData。如果您没有任何理由拥有两个表单，则可以将其合并为一个。

注意：我没有添加任何表单验证。添加表单验证，请参考https://codepen.io/sevilayha/pen/xFcdI

HTML：

<form name="form1" ng-submit="enableForm2()">
    <input type="text" name="fname" ng-model="obj.fname" />
    <input type="text" name="lname" ng-model="obj.lname" />
    <input type="submit" value="Next" />
</form>

<form name="form2" ng-show="enableForm" ng-submit="finalSubmit()">
    <input type="text" name="address" ng-model="obj.address" />
    <input type="text" name="state" ng-model="obj.state" />
    <input type="submit" value="Next" />
</form>

JS：

 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope, $http) {
     $scope.obj = {};
     $scope.enableForm = false;
     $scope.enableForm2 = function() {
         $scope.enableForm = true;
     }
     $scope.finalSubmit = function() {
         $http({
             method: 'POST',
             url: YourURL,
             withCredentials: true,
             headers: {
                 'Content-Type': undefined
             },
             data: {},
             transformRequest: function(data, headersGetter) {
                 var formData = new FormData();
                 angular.forEach($scope.obj, function(value, key) {
                     formData.append(key, value);
                 })
                 return formData;
             }
         }).then(function(data) {
            $scope.enableForm=false;
           }).catch(function(data, status) {

          })
     }
 });

【讨论】：

【解决方案2】：

您可以通过 Ajax 调用而不是直接提交来实现它。此外，表格提交不是必需的。（添加表单标签是可选的）

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Personal Info</p>
<input type="text" ng-model="form1.fname" name="fname"/>
<input type="text" ng-model="form1.lname" name="lname"/>
<input type="button" ng-click="SubmitForm()" value="Next"/>


<p>Address Info</p>
<input type="text" ng-model="form2.address" name="address"/>
<input type="text" ng-model="form2.state" name="state"/>
<input type="button" ng-click="SubmitForm()" value="Next"/>


</div>

<script>
    var app = angular.module('myApp', ['ngMaterial']);

    app.controller('myCtrl', function ($scope, $http, $q, HTTPService) {

        $scope.form1 = {
          fname: '',
          lname: ''
        };
        
        $scope.form2 = {
          address: '',
          state: ''
        };
        
        $scope.SubmitForm = function () {
            
            let submitFormData = {
              form1: $scope.form1,
              form2: $scope.form2
            };
        
            HTTPService.SubmitData(submitFormData);
        }
        
    });
	
	app.factory('HTTPService', function ($http, $q) {
        return {
            SubmitData: function (formData) {
            let apiUrl = 'http://localhost:2000/...';
            var req = {
                method: 'POST',
                url: apiUrl + "SaveData.php",
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": '',
                    "Access-Control-Allow-Origin": "*"
                },
                data: formData
            };

            var result = $http(req)
            .then(function(response) {
                return angular.fromJson(response.data);
            }, function(response) {
                return null;
            });

            return result;
        },
        };
    });
</script>
</body>
</html>

【讨论】：

【解决方案3】：

使用 $scope 也会得到不同格式的字段值。

【讨论】：

【解决方案4】：

HTML 代码

<div ng-app="App" ng-controller="Ctrl"> 
<form name="myForm">
<!-- first nested form -->
  <div ng-form="form1">
    <label><p>Personal Info</p></label>    
    <input type="text" name="fname" ng-model="myForm.fname"/>
    <input type="text" name="lname" ng-model="myForm.lname"/>
  </div>
<!-- second nested form -->
 <div ng-form="form2">
    <label><p>Address Info</p></label>
    <input type="text" name="address" ng-model="myForm.address"/>
    <input type="text" name="state" ng-model="myForm.state"/>
</div>
<!-- etc. -->
<input type="submit" ng-click="SubmitForm()" value="Next"/>
</form>
</div>

JS/控制器代码

 var app = angular.module('App');

app.controller('Ctrl', function ($scope) {
    $scope.SubmitForm = function () {
        var SubmitForm = $scope.myForm;
        console.log(SubmitForm);
       }
  });

【讨论】：

【解决方案5】：

你可以做一些像下面这样的事情

<form name="form1" ng-submit="moveNext(user)">
   <input type="text" ng-model="user.fname" name="fname" required/>
   <input type="text" ng-model="user.fname" name="lname" required/>
   <input type="submit" value="Next"/>
</form>
<form name="form2" ng-submit="submit(addressData)">
   <input type="text" ng-model="addressData.address" name="address"/>
   <input type="text" ng-model="addressData.state" name="state"/>
   <input type="submit" value="Next"/>
</form>

在控制器中

$scope.userDetails = {};
$scope.addressDetails = {};
$scope.moveNext = function(userData){
    $scope.userDetails = userData //Save user Data here and implement logic to scroll to next form and validation
}

$scope.submit = function(addressData){
  $scope.addressDetails = addressData; 
  // and validate the form and Submit data to server here as per your requirement 
}

【讨论】：