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

Question

您好，我正在使用 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)向服务器提交数据。我可以知道这有可能实现吗？我还可以知道这是我遵循的正确方法还是我必须满足上述要求的其他事情？任何建议或帮助将不胜感激。谢谢。

Answer 1

您可以将所有值绑定(bind)到一个公共(public)对象。我在提交第一个表单后启用第二个表单。在第二个表单提交函数中，您只需循环遍历公共(public)对象的值并将其附加到 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) {

          })
     }
 });