Question

您好我正在开发angularjs中的Web应用程序。我在一个html页面中有两个表单。以下是结构。

RefCell

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

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

Answer 1

你可以通过直接提交来实现Ajax Call。此外，表格提交不是必需的。（添加表格标签是可选的）

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

Answer 2

使用$ scope也可以获得不同格式的字段值。

Answer 3

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 / Controller代码

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

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

Answer 4

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

          })
     }
 });

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

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

5 个答案: