多表单数据一次提交

Question

我有一些表单，每个表单都放在页面的可折叠面板包装器中。我的每个表格都由 3 或 4 个表格组组成。每一种形式都由一个控制器块控制。最后，我为每个表单组提供了不同的功能块。

目前，一旦创建并填写了字段，表单组就会动态创建一个 .json 文件。（您可以在此处的 .gif 中看到它：DYNAMICALLY CREATED JSONS）

我有一个API，写在PHP；我正在分享插入和 select 如何分别以 .gif 格式工作。（目前 api 对所有内容都使用 GET 以便轻松测试，所以不要感到惊讶我知道它。) ( INSERT, SELECT AFTER INSERTION )

我需要做的是，post 将这些提交到数据库，如果所有 JSON 的聚合没有错误，则立即提交，如果有错误，则在提交前警告用户。

因此，我的问题是如何编写实现 post 这些 JSON 的提交函数。

你可以在下面找到我的代码片段，当然它在这里不起作用；但我正在分享，因为我需要一个解决方案。在我的控制器的末尾，我有一个名为 submitKisiIletisimBilgileri 的函数，它当前将所有 JSON 和日志连接到控制台。相反，它需要通过使用不同的参数调用 LocationService.AddField() 几次来执行 post。但是我无法塑造我的代码的那一部分；那就是我需要帮助的地方。 :)

app.controller('KisiIletisimBilgileri', ["$scope", "LocationService", function ($scope, LocationService) {

    $scope.phones = [{
        type: '',
        tel: ''
    }];
    $scope.addNewPhoneNumber = function () {
        $scope.phones.push({
            'type': '',
            'tel': ''
        });
        //  console.log(dataPhones);
    };
    $scope.removePhoneNumber = function (x) {
        // var lastItem = $scope.phones.length - 1;
        var index = $scope.phones.indexOf(x)

        if ($scope.phones.length > 1) //Never delete last one
            $scope.phones.splice(index, 1);
    };
    var dataPhones = $scope.phones;

    //Email Variables
    $scope.EmailTypeId = null;
    $scope.EmailTypeList = null;
    //Email Object & Functions
    $scope.mails = [{
        //id: '1',
        type: '',
        email: ''
    }];
    $scope.addNewEmailAddress = function () {
        //var newItemNo = $scope.mails.length + 1;
        $scope.mails.push({
            //'id': '' + newItemNo,
            'type': '',
            'email': '' //+ newItemNo
        });
    };
    $scope.removeEmailAddress = function (x) {
        // var lastItem = $scope.mails.length - 1;
        var index = $scope.mails.indexOf(x)

        if ($scope.mails.length > 1) //Never delete last one
            $scope.mails.splice(index, 1);
    };
    var dataMails = $scope.mails;

    //Media Variables
    $scope.MediaTypeId = null;
    $scope.MediaTypeList = null;
    //Media Object & Functions
    $scope.media = [{
        //id: '1',
        type: '',
        sma: ''
    }];
    $scope.addNewSMAccount = function () {
        //var newItemNo = $scope.media.length + 1;
        $scope.media.push({
            //'id': '' + newItemNo,
            'type': '',
            'sma': '' //+ newItemNo
        });
    };
    $scope.removeSMAccount = function (x) {
        // var lastItem = $scope.media.length - 1;
        var index = $scope.media.indexOf(x)

        if ($scope.media.length > 1) //Never delete last one
            $scope.media.splice(index, 1);
    };
    var dataMedia = $scope.media;

    $scope.submitKisiIletisimBilgileri = function () {

        var data = new Array();
        data.push(dataPhones);
        data.push(dataMails);
        data.push(dataMedia);

        /* post to server*/
        console.log(data);

    }



}]);
app.factory('LocationService', ["$http", function($http) {

    var fac = {};
    fac.AddField = function(q, t, c0, v0, c1, v1, c2, v2) {
        return $http.get('assets/api/kisiduzenle.php?q=' + q + '&t=' + t + '&c[0]=' + c0 + '&v[0]=' + v0 + '&c[1]=' + c1 + '&v[1]=' + v1 + '&c[2]=' + c2 + '&v[2]=' + v2);
    }
    return fac;
}]); //factory

<div class="panel panel-white" id="paneliletisimbilgileri">
    <div class="panel-heading">
        <h4 class="panel-title text-primary">Kişi İletişim Bilgileri</h4>
        <ct-paneltool class="panel-tools" tool-collapse="tool-collapse"></ct-paneltool>
    </div>
    <div uib-collapse="paneliletisimbilgileri" ng-init="paneliletisimbilgileri=false" class="panel-wrapper">

        <form role="form" class="form-horizontal" ng-controller="KisiIletisimBilgileri">

            <!--PHONES-->

            <div class="form-group" data-ng-repeat="block in phones">

                <label class="col-sm-1 control-label" for="adsoyadunvan" ng-model="block">
                    Phone Number
                </label>
                <div class="col-sm-1">
                    <!--
                    <select class="form-control" ng-model="PhoneTypeId" ng-options="PhoneTypeList.COUNTRY_ID as PhoneTypeList.NAME for PhoneTypeList in PhoneTypeList" ng-change="GetPhoneType()">
                        <option value="" disabled="">Seçiniz</option>
                    </select>
-->
                    <span class="clip-select">
                            <select ng-model="block.type" name="country" class="form-control">
                                <option value="">&nbsp;</option>
                                <option value="Aktif">Aktif</option>
                                <option value="İş">İş</option>
                                <option value="Kişisel">Kişisel</option>
                                <option value="Cep">Cep</option>
                            </select>
                        </span>
                </div>
                <div class="col-sm-2">

                    <input type="text" ng-model="block.tel" id="adsoyadunvan" class="form-control underline" name="masked" ui-mask="(999) 999-9999" placeholder="(999) 999-9999">
                </div>


                <button class="col-md-offset-4 btn btn-red" href="#"><i class="fa fa-minus" ng-click="removePhoneNumber(block)"></i> </button>
            </div>
            <div id="phonesDisplay">
                <button class="col-md-offset-4 btn btn-azure" href="#"><i class="fa fa-plus" ng-click="addNewPhoneNumber()"></i> </button>
                <br>{{ phones }}
            </div>
            <!--PHONES-->

            <!--MAILS-->
            <div class="form-group" data-ng-repeat="block in mails">

                <label class="col-sm-1 control-label" for="adsoyadunvan" ng-model="block">
                    E-mail
                </label>
                <div class="col-sm-1">
                    <span class="clip-select">
                            <select ng-model="block.type" name="country" class="form-control">
                                <option value="">&nbsp;</option>
                                <option value="Aktif">Aktif</option>
                                <option value="İş">İş</option>
                                <option value="Kişisel">Kişisel</option>
                            </select>
                        </span>
                </div>
                <div class="col-sm-2">
                    <input type="email" ng-model="block.email" id="adsoyadunvan" class="form-control underline" name="masked" placeholder="abc@abc.com">
                </div>


                <button class="col-md-offset-4 btn btn-red" href="#"><i class="fa fa-minus" ng-click="removeEmailAddress(block)"></i> </button>
            </div>
            <div id="mailsDisplay">
                <button class="col-md-offset-4 btn btn-azure" href="#"><i class="fa fa-plus" ng-click="addNewEmailAddress()"></i> </button>
                <br>{{ mails }}
            </div>
            <!--MAILS-->

            <!--SOCIAL MEDIA-->
            <div class="form-group" data-ng-repeat="block in media">

                <label class="col-sm-1 control-label" for="adsoyadunvan" ng-model="block">
                    Social Media Account
                </label>
                <div class="col-sm-1">
                    <span class="clip-select">
                            <select ng-model="block.type" name="country" class="form-control">
                                <option value="">&nbsp;</option>
                                <option value="Facebook">Facebook</option>
                                <option value="Twitter">Twitter</option>
                                <option value="Instagram">Instagram</option>
                            </select>
                        </span>
                </div>
                <div class="col-sm-2">
                    <input type="text" ng-model="block.sma" id="adsoyadunvan" class="form-control underline">
                </div>


                <button class="col-md-offset-4 btn btn-red" href="#"><i class="fa fa-minus" ng-click="removeSMAccount(block)"></i> </button>
            </div>
            <div id="mediaDisplay">
                <button class="col-md-offset-4 btn btn-azure" href="#"><i class="fa fa-plus" ng-click="addNewSMAccount()"></i> </button>
                <br>{{ media }}
            </div>
            <!--SOCIAL MEDIA-->
            <div>
                <button class="col-md-offset-4 btn btn-green" href="#"><i class="fa fa-paper-plane" ng-click="submitKisiIletisimBilgileri()"></i> </button>
            </div>

        </form>


    </div>

</div>

编辑 1：我更新了我的提交功能如下

$scope.submitKisiIletisimBilgileri = function () {
    $scope.myForm.$setSubmitted();
    if ($scope.myForm.$invalid) {
        alert("There's something invalid in one of the forms!");
    } else {
        ///api/kisiduzenle.php?q=add&t=telefon&c[0]=KISILIK_ID&v[0]=119486&c[1]=TELEFON&v[1]=888888888&c[2]=TIP&v[2]=W
        var urlParams = {
            q: 'add',
            t: 'telefon',
            c0: 'KISILIK_ID',
            v0: '119486',
            c1: 'TELEFON',
            v1: '8888888888',
            c2: 'TIP',
            v2: 'W'
        }

        var data = new Array();
        data.push(dataPhones);
        data.push(dataMails);
        data.push(dataMedia);

        LocationService.AddField(urlParams, data);
    }
}

编辑 2：虽然我在 LocationService 中的功能是这样的..

  fac.AddField = function (urlParams, formData) {
    var request = {
        method: 'GET'
        url: 'assets/api/kisiduzenle.php?q=' + urlParams.q + '&t=' + urlParams.t + '&c[0]=' + urlParams.c0 + '&v[0]=' + urlParams.v0 + '&c[1]=' + urlParams.c1 + '&v[1]=' + urlParams.v1 + '&c[2]=' + urlParams.c2 + '&v[2]=' + urlParams.v2
        data: formData,
        headers: {
            'Content-Type': 'application/json'
        }
    }

Answer 1

我不太熟悉 angular 但是...为什么不在你的函数中使用 jQuery？

var formData = $( "#testform" ).serialize();

Answer 2

首先你应该命名你的表单以便从你的控制器获得访问权限。可以选择对嵌套表单使用 ngForm 指令 - https://docs.angularjs.org/api/ng/directive/ngForm - 这真的很有帮助。如果您的嵌套表单之一无效，那么您的父表单也无效。

<form name="myForm">
<!-- first nested form -->
   <div ng-form="firstNestedForm">
   </div>
<!-- second nested form -->
   <div ng-form="secondNestedForm">
   </div>
<!-- etc. -->
   ...
</form>

之后更新你的函数 submitKisiIletisimBilgileri 看起来像这样

$scope.submitKisiIletisimBilgileri = function () {
    $scope.myForm.$setSubmitted();
    if($scope.myForm.$invalid){
       // alert user
    }else{
      // gather your forms data and post it to server
    }
}

正确设置表单很重要，因为 $scope.myForm.$invalid 取决于它。如果您的输入等或 required 属性上没有任何验证器，那么您的表单将始终有效。

在此处阅读更多内容 https://docs.angularjs.org/api/ng/type/form.FormController 和 https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

您的 $http 请求应该如下所示

var request = {},
    formData = {data: []};

formData.data.push(dataPhones);
formData.data.push(dataMails);
formData.data.push(dataMedia);

request = { 
  method: 'POST'                 // or GET... it depends on you API
  url: 'http://myapi.com/form'   // your API url
  headers: {
     'Content-Type': 'application/json'   // here you can place authorization token etc.
  },                     
  data: formData                 // your form data to post on server
}

$http(request).then(function(response){
   // do something on success
},function(error){
   // do something on error
});

或使用您的LocationService

app.factory('LocationService', ["$http", function($http) {
    var fac = {};
    fac.AddField = function(formData) {
        var request = {
            method: 'GET',
            url: 'assets/api/kisiduzenle.php',
            params: formData
        }

        return $http(request);
    }
    return fac;
}]);

多表单数据一次提交

multiple form data submit at once

json

http

params

angularjs