多个表单数据一次提交

时间:2016-08-23 14:34:31

标签: angularjs json http params

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

目前,一旦创建并填充了字段,表单组就会动态创建.json文件。 (你可以在这里看到这个.gif:DYNAMICALLY CREATED JSONS

我有一个用PHP编写的API;我正在分享如何以.gif格式分别插入和选择工作。(目前api使用GET来处理所有内容以便轻松测试它,所以不要惊讶我知道它。)({{3} },INSERT

我需要做的是,将这些发布到DB并立即提交,如果所有JSON的聚合没有错误,并在提交之前警告用户,如果有错误。

因此,我的问题是我如何编写一个实现发布这些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'
        }
    }

2 个答案:

答案 0 :(得分:1)

首先,您应该为表单命名,以便从您的控制器进行访问。 (可选)对嵌套表单使用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.FormControllerhttps://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;
}]);

答案 1 :(得分:-1)

我对角度并不熟悉,但是......为什么不在你的函数中使用jQuery?

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