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

嗨，我正在用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的next submit按钮后，我想验证第二个表单，并使用formsform1和form2中的$http向服务器提交数据。

---

我可以知道这是可能实现的吗？我还可以知道这是我遵循的正确方式，还是与上述要求有关的其他事项？如有任何建议或帮助，将不胜感激。多谢各位

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

个人信息

地址信息

var-app=angular.module'myApp'，['ngMaterial']； app.controller'myCtrl'，函数$scope，$http，$q，HTTPService{ $scope.form1={ fname:， 名称： }; $scope.form2={ 地址：， 声明： }; $scope.SubmitForm=函数{ 让submitFormData={ 表单1:$scope.form1， 表单2:$scope.form2 }; HTTPService.submitdata submitformdata； } }; app.factory'HTTPService'，函数$http，$q{ 返回{ SubmitData：函数formData{ 让我们来看看http://localhost:2000/...'; var req={ 方法：“POST”， url:apiUrl+SaveData.php， 标题：{ 内容类型：application/json， 授权：， 访问控制允许来源：* }, 数据：formData }; var结果=$httpreq .Then函数响应{ 返回angular.fromJsonresponse.data； }，函数响应{ 返回null； }; 返回结果； }, }; };

---

你可以做下面这样的事情

<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还可以获得不同形式的字段值

HTML代码

---

可以将所有值绑定到一个公共对象。在提交第一个表单后，我将启用第二个表单。在第二个forms submit函数中，您只需循环遍历公共对象的值并将其附加到formData。如果您没有任何理由拥有两个表单，可以将其合并为一个

注意：我没有添加任何表单验证。有关添加表单验证，请参阅

HTML:

---

是的，这是可能的。您只需捕获第一个表单的值，在提交第二个表单时，使用formData附加您捕获的所有值。谢谢单击第一个提交按钮后，我可以验证第一个表单并滚动到第二个表单，最后我可以从两个表单捕获数据并提交？如何从多个表单捕获数据$scope.modelname？这两个表单是否在同一控制器的作用域内？我建议您将两个表单的所有属性绑定到同一个控制器上。

$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 
}

<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>

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

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

<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>

 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) {

          })
     }
 });