立即提交多个表单数据
问题描述：
我得到了一个表单，每个表单都放置在页面中的可折叠面板包装中。我的每个表格都由3或4个表格组组成。每一种形式都由控制器块控制。最后，我为每个表单组分配了不同的功能块。立即提交多个表单数据
目前，一旦字段被创建并被填满，表单组动态地创建一个.json文件。 （你可以看到这是在这个.gif这里：DYNAMICALLY CREATED JSONS）
我有一个API，用PHP编写;我分享了如何以.gif格式插入和选择工作。（目前，api使用GET来轻松测试，所以不要惊讶我意识到这一点。）（INSERT，SELECT AFTER INSERTION）
我需要做的是将它们发布到数据库并立即提交，如果在所有JSON的聚合上没有错误并在提交之前警告用户，如果有错误。
因此，我的问题是如何编写一个提交函数来实现发布这些JSON。
下面你可以在snippet中找到我的代码，当然这里不工作;但是我需要一个解决方案来分享。在我的控制器结尾处，我有一个名为submitKisiIletisimBilgileri的函数，它目前将所有JSON和日志连接到控制台。取而代之的是，它需要通过使用不同的参数调用LocationService.AddField（）几次来执行后期操作。但是我无法塑造我的代码的那一部分;那是我需要帮助的地方。 :)
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=""> </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=""> </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="[email protected]">
</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=""> </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'
}
}
答
首先，你应该为您的形式从你的控制器访问。可选择使用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;
}]);
答
我不是很熟悉角度，但...为什么不是我们在你的函数内的jQuery？
var formData = $("#testform").serialize();
感谢您的快速响应。我将阅读这两个主题。请以正确的方式帮我组建我的$ http.get，以便我可以继续前进。我如何将数据作为参数提供给该函数？ – ybaylav
可以请你帮我一下吗？ – ybaylav
@ybaylav检查我的更新 – krutkowski86