如何使用angularjs一次性向服務器發送多個表單數據？

嗨我正在angularjs中開發Web應用程序。我在一個html頁面中有兩種形式。下面是結構。如何使用angularjs一次性向服務器發送多個表單數據？

<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的下一個提交按鈕時，我想要驗證第二個表單，並且我想使用兩個表單（form1和form2）中的$ http提交數據到服務器。我可以知道這是可能實現嗎？我也可能知道這是我正在遵循的正確方式還是其他與我的要求有關的事情？任何建議或幫助將不勝感激。謝謝。

來源

2017-08-10 Niranjan Godbole

是其可能的。您只需捕獲第一個表單的值和提交第二個表單的值，使用formData附加所有您捕獲的值。 – Vivz

嗨Vivz。謝謝。點擊第一個提交按鈕後，我可以驗證第一個表單並滾動到第二個表單，最後我能夠從這兩個表單中捕獲數據並提交它？ –

如何從多個表單中捕獲數據？ $ scope.modelname？ –

您可以將所有值綁定到一個共同的目標。我在提交第一個表單後啓用第二個表單。在第二種形式提交功能中，您只需循環訪問常用對象的值並將其附加到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) { 

      }) 
    } 
});

來源

2017-08-10 05:52:52 Vivz

您可以通過直接提交實現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); 
 
     } 
 
     
 
    }); 
 
\t 
 
\t 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>

來源

2017-08-10 05:33:16

謝謝。當我跑我得到錯誤。 –

檢查包含的所有依賴項文件併發布錯誤... –

你可以做些事情像下面

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

來源

2017-08-10 05:35:58 Rahul

使用$範圍還你會得到不同形式的字段值。

來源

2017-08-10 05:42:44 Nikita

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); 
     } 
    });

來源

2017-08-10 05:47:13

如何使用angularjs一次性向服務器發送多個表單數據？

回答

相關問題