angularjs form data is not post properly.? - angularjs

Question

My HTML form data is not POST
HTML View Page:-
<div class="col-sm-12">
<div class="card-box">
<form class="form-inline" name="addstock"
ng-submit="saveStockPurchaseInvoice()">
<h3 class="m-t-0 m-b-30 header-title text-center">Invoice
Details</h3>
<div class="row" style="margin-bottom: 20px;">
<div class="form-group col-md-3" style="">
<select name="supplier" ng-model="productStock.suppliername"
class="form-control" required="">
<option value="">Select a Supplier</option>
<option ng-repeat="allsupplier in supplier"
value="{{allsupplier.supplier_id}}">
{{allsupplier.supplier_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.supplier.$touched && addstock.supplier.$invalid">Supplier
is Required.</span>
</div>
<div class="form-group col-md-3">
<input type="text" class="form-control"
ng-model="productStock.invoice" id="invoice" name="invoice"
placeholder="Enter Invoice Number" required> <br> <span
style="color: red"
ng-show="addstock.invoice.$touched && addstock.invoice.$invalid">Enter
Invoice Number.</span>
</div>
<div class="form-group col-md-3">
<input type="date" name="productdate" id="productdate"
ng-model="productStock.productdate" class="form-control"
required=""> <br> <span style="color: red"
ng-show="addstock.productdate.$touched && addstock.productdate.$invalid">Date
is Required.</span>
</div>
</div>
<h3 class="m-t-0 m-b-30 header-title text-center">ITEMS</h3>
<div ng-repeat="productStock in productStocks"
style="margin-bottom: 10px;">
<div class="form-group">
<!--<input type="text" name="product_name" ng-model="productsStock.product_name" required="" placeholder="Product Name" class="form-control" id="product_name">-->
<select name="productStock_name"
ng-model="productStock.productStock" class="form-control"
required="">
<option value="">Select a Product</option>
<option ng-repeat="products in allproducts"
value="{{products.product_id}}">
{{products.product_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.productStock_name.$touched && addstock.productStock_name.$invalid">Product
Name Required.</span>
</div>
<div class="form-group">
<input id="productstock_qty" type="number" min="1" required=""
name="productstock_qty" ng-model="productStock.productstock_qty"
placeholder="Product Quantity" class="form-control"> <br>
<span style="color: red"
ng-show="addstock.productstock_qty.$touched && addstock.productstock_qty.$invalid">Product
Quantity required.</span>
</div>
<div class="form-group">
<input id="productstock_price" type="number" min="1"
ng-model="productStock.productstock_price"
name="productstock_price" placeholder="Product Price"
class="form-control" maxlength="15" size="10" required="">
<br> <span style="color: red"
ng-show="addstock.productstock_price.$touched && addstock.productstock_price.$invalid">Price
required.</span>
</div>
<div class="form-group">
<select name="product_units"
ng-model="productStock.productstock_units" class="form-control"
required="">
<option value="">Select Units</option>
<option ng-repeat="units in allunits" value="{{units.unit_id}}">
{{units.unit_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.product_units.$touched && addstock.product_units.$invalid">Units
is required.</span>
</div>
<div class="form-group">
<input id="productstock_cgst" type="text"
ng-model="productStock.productstock_cgst" name="productstock_cgst"
placeholder="CGST" class="form-control" maxlength="10" size="6"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_cgst.$touched && addstock.productstock_cgst.$invalid">required.</span>
</div>
<div class="form-group">
<input id="productstock_sgst" type="text"
ng-model="productStock.productstock_sgst" name="productstock_sgst"
placeholder="SGST" class="form-control" maxlength="10" size="6"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_sgst.$touched && addstock.productstock_sgst.$invalid">required.</span>
</div>
<!--<div class="form-group">-->
<!-- <input id="productstock_gst" type="text" ng-model="productStock.productstock_gst" ng-keydown="keydownevt()" name="productstock_gst" placeholder="GST" class="form-control" maxlength="10" size="6" required="">-->
<!-- <br>-->
<!-- <span style="color:red" ng-show="addstock.productstock_gst.$touched && addstock.productstock_gst.$invalid">required.</span> -->
<!--</div>-->
<div class="form-group">
<input id="productstock_total" type="text"
ng-model="productStock.productstock_total"
name="productstock_total" placeholder="Total" class="form-control"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_total.$touched && addstock.productstock_total.$invalid">Total
is required</span>
</div>
<button class="btn btn-danger btn-sm" ng-show="$last"
ng-click="removeStock()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<!-- ng-repeat close for add dynamic product field-->
<div class="form-group text-right m-b-0">
<button class="addfields btn btn-info waves-effect waves-light"
ng-click="addstockproduct()">Add Stock</button>
</div>
<div class="form-group text-right m-b-0 pull-right"
style="margin-top: 10px;">
<button type="submit" ng-click="" class="btn btn-primary">Save</button>
<button type="reset" class="btn btn-warning">Reset</button>
</div>
</form>
</div>
angularjs Controller:-
//Add Dynamic Fields.
$scope.productStocks = [{id: 'firstField2'}];
$scope.addstockproduct = function(){
var newItemNo2 = $scope.productStocks.length+1;
$scope.productStocks.push({'id':'field'+newItemNo2});
}
$scope.removeStock = function() {
var itemLast2 = $scope.productStocks.length-1;
$scope.productStocks.splice(itemLast2);
};
angularjs code for add records:-
$scope.productStock={};
$scope.suplier_succ = false;
$scope.suplier_err = false;
$scope.saveStockPurchaseInvoice=function(){
$http({
method: 'post',
url: 'stock/insert_stock',
data: $scope.productStock,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data)
{
if (data == 1) {
$scope.suplier_succ = $scope.suplier_succ ? false : true;
$scope.succ = "Stock added successfully";
$timeout(function () {
$(".modal").modal("hide");
}, 3000);
// $scope.formsup = {}; // clears input fields
// $scope.addsuppler.$setPristine();
// $scope.addsuppler.$setUntouched();
} else{
$scope.suplier_err = $scope.suplier_err ? false : true;
$scope.err = "Stock insertion failed! Try again.";
}
});
};
Codeigniter Controller:-
public function insert_stock(){
$request = json_decode(file_get_contents('php://input'), TRUE);
print_r($request);
}
enter image description here
My Result:-(All Records value is not POST)
enter image description here

Answer 1

I had the same problem with form data post.
I was able to resole it by setting headers: { 'Content-Type': undefined } and transformRequest: angular.identity in http request.
below is my sample code.
function Upload(containerName, objFile, objParams) {
var deferred = $q.defer();
var frmData = new FormData();
frmData.append('file', objFile);
var req = {
method: 'POST',
url: window.APIBaseUrl + 'containers/' + containerName + '/upload',
data: frmData,
params: objParams,
headers: { 'Content-Type': undefined },
transformRequest: angular.identity,
dataType: "json"
}
$http(req).then(function (response) {
deferred.resolve(response.data);
}, function (err) {
deferred.reject(handleHttpError(err));
$log.error("Error in upload", err);
});
return deferred.promise;
}

Answer 2

This May help you
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-sm-6" style="width:50%;">
<div class="card-box">
<form class="form-inline" name="addstock"
ng-submit="saveStockPurchaseInvoice()">
<h3 class="m-t-0 m-b-30 header-title text-center">Invoice
Details</h3>
<div class="row" style="margin-bottom: 20px;">
<div class="form-group col-md-3" style="">
<select name="supplier" ng-model="productStock.suppliername"
class="form-control" required="">
<option value="">Select a Supplier</option>
<option ng-repeat="allsupplier in supplier"
value="{{allsupplier.supplier_id}}">
{{allsupplier.supplier_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.supplier.$touched && addstock.supplier.$invalid">Supplier
is Required.</span>
</div>
<div class="form-group col-md-3">
<input type="text" class="form-control"
ng-model="productStock.invoice" id="invoice" name="invoice"
placeholder="Enter Invoice Number" required> <br> <span
style="color: red"
ng-show="addstock.invoice.$touched && addstock.invoice.$invalid">Enter
Invoice Number.</span>
</div>
<div class="form-group col-md-3">
<input type="date" name="productdate" id="productdate"
ng-model="productStock.productdate" class="form-control"
required=""> <br> <span style="color: red"
ng-show="addstock.productdate.$touched && addstock.productdate.$invalid">Date
is Required.</span>
</div>
</div>
<h3 class="m-t-0 m-b-30 header-title text-center">ITEMS</h3>
<div ng-repeat="item in productStocks track by $index"
style="margin-bottom: 10px;">
<div class="form-group">
<!--<input type="text" name="product_name" ng-model="productsStock.product_name" required="" placeholder="Product Name" class="form-control" id="product_name">-->
<select name="productStock_name"
ng-model="productStock.items[$index].productStock" class="form-control"
required="">
<option value="">Select a Product</option>
<option ng-repeat="products in allproducts"
value="{{products.product_id}}">
{{products.product_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.productStock_name.$touched && addstock.productStock_name.$invalid">Product
Name Required.</span>
</div>
<div class="form-group">
<input id="productstock_qty" type="number" min="1" required=""
name="productstock_qty" ng-model="productStock.items[$index].productstock_qty"
placeholder="Product Quantity" class="form-control"> <br>
<span style="color: red"
ng-show="addstock.productstock_qty.$touched && addstock.productstock_qty.$invalid">Product
Quantity required.</span>
</div>
<div class="form-group">
<input id="productstock_price" type="number" min="1"
ng-model="productStock.items[$index].productstock_price"
name="productstock_price" placeholder="Product Price"
class="form-control" maxlength="15" size="10" required="">
<br> <span style="color: red"
ng-show="addstock.productstock_price.$touched && addstock.productstock_price.$invalid">Price
required.</span>
</div>
<div class="form-group">
<select name="product_units"
ng-model="productStock.items[$index].productstock_units" class="form-control"
required="">
<option value="">Select Units</option>
<option ng-repeat="units in allunits" value="{{units.unit_id}}">
{{units.unit_name}}</option>
</select> <br> <span style="color: red"
ng-show="addstock.product_units.$touched && addstock.product_units.$invalid">Units
is required.</span>
</div>
<div class="form-group">
<input id="productstock_cgst" type="text"
ng-model="productStock.items[$index].productstock_cgst" name="productstock_cgst"
placeholder="CGST" class="form-control" maxlength="10" size="6"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_cgst.$touched && addstock.productstock_cgst.$invalid">required.</span>
</div>
<div class="form-group">
<input id="productstock_sgst" type="text"
ng-model="productStock.items[$index].productstock_sgst" name="productstock_sgst"
placeholder="SGST" class="form-control" maxlength="10" size="6"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_sgst.$touched && addstock.productstock_sgst.$invalid">required.</span>
</div>
<!--<div class="form-group">-->
<!-- <input id="productstock_gst" type="text" ng-model="productStock.productstock_gst" ng-keydown="keydownevt()" name="productstock_gst" placeholder="GST" class="form-control" maxlength="10" size="6" required="">-->
<!-- <br>-->
<!-- <span style="color:red" ng-show="addstock.productstock_gst.$touched && addstock.productstock_gst.$invalid">required.</span> -->
<!--</div>-->
<div class="form-group">
<input id="productstock_total" type="text"
ng-model="productStock.items[$index].productstock_total"
name="productstock_total" placeholder="Total" class="form-control"
required=""> <br> <span style="color: red"
ng-show="addstock.productstock_total.$touched && addstock.productstock_total.$invalid">Total
is required</span>
</div>
<button class="btn btn-danger btn-sm" ng-show="$last"
ng-click="removeStock()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<!-- ng-repeat close for add dynamic product field-->
<div class="form-group text-right m-b-0">
<button class="addfields btn btn-info waves-effect waves-light"
ng-click="addstockproduct()">Add Stock</button>
</div>
<div class="form-group text-right m-b-0 pull-right"
style="margin-top: 10px;">
<button type="submit" ng-click="" class="btn btn-primary">Save</button>
<button type="reset" class="btn btn-warning">Reset</button>
</div>
</form>
</div>
</div>
<div style="width:50%">
<pre>{{productStock | json}}</pre>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.productStocks = [{id: 'firstField2'}];
$scope.supplier = [{supplier_id:1, supplier_name:'abc'}];
$scope.allproducts = [{ product_name:'qwerty',product_id:1 }];
$scope.allunits = [{ unit_id:1,unit_name:'iop'}];
$scope.addstockproduct = function(){
var newItemNo2 = $scope.productStocks.length+1;
$scope.productStocks.push({'id':'field'+newItemNo2});
}
$scope.removeStock = function() {
var itemLast2 = $scope.productStocks.length-1;
$scope.productStocks.splice(itemLast2);
};
$scope.productStock={};
$scope.suplier_succ = false;
$scope.suplier_err = false;
$scope.saveStockPurchaseInvoice=function(){
$http({
method: 'POST',
url: 'http://abcd/insert', //change to your url
data: JSON.stringify($scope.productStock),
//headers: {'Content-Type': 'application/x-www-form-urlencoded'}
headers: { 'Content-Type': undefined },
transformRequest: angular.identity,
dataType: "json"
// 'Content-Type':'application/json'
}).then(function (response)
{
if (data == 1) {
$scope.suplier_succ = $scope.suplier_succ ? false : true;
$scope.succ = "Stock added successfully";
$timeout(function () {
$(".modal").modal("hide");
}, 3000);
// $scope.formsup = {}; // clears input fields
// $scope.addsuppler.$setPristine();
// $scope.addsuppler.$setUntouched();
} else{
$scope.suplier_err = $scope.suplier_err ? false : true;
$scope.err = "Stock insertion failed! Try again.";
}
});
};
//$request = json_decode(file_get_contents('php://input'), TRUE);
// print_r($request);
});
</script>
</body>
</html>