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

          })
     }
 });