Hi Geeks,
When I was working with angular form posts then I was tried radio and checkboxes as normal inputs in angular js form post then it is sending [Object Object] to the webservices and that object couldn’t be parsed by the server-end , and also inserted [Object Object] text into the database also.
But I need to send the controls in key val pair So I Write following code written to sent it, These are the steps which I follow to achieve it.
First I created the Html controls like this :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!— html radio box for item condition —> <div class="form-group"> <label class="checkbox-inline"> <input name="condition1" type="radio" value="Bad" ng-model="postAdd.condition1">Bad</label> <label class="checkbox-inline"> <input name="condition1" type="radio" ng-checked="true" value="Good" ng-model="postAdd.condition1">Good</label> <label class="checkbox-inline"><input name="condition1" type="radio" value="Better" ng-model="postAdd.condition1">Better </label> </div> <!— html radio box for item condition —> <!—html checkbox for item type ---> <div class="form-group"> <label class="checkbox-inline"> <input name="prd_type" type="checkbox" ng-model=" postAdd .prd_type.Car">Car</label> <label class="checkbox-inline"><input name="prd_type" type="checkbox" ng-model=" postAdd .prd_type.Byke">Byke</label> <label class="checkbox-inline"> <input name="prd_type" type="checkbox" ng-model="prd_type.Tv">TV</label> </div> <!—html checkbox for item type ---> |
Now in your Controller ‘s submit function ( I am assuming that you have already go through my previous article for form process in angular js or you already aware with form processing in angular js ) as following:
|
1 2 3 4 5 |
//collect the radio opted value data in a var var single_option= $scope. postAdd.condition1;//it will come directly because same group for radio will get only the selected value //collect the checkboxes data in a var with comma seperated var checked_items=””; angular.forEach($scope. postAdd .prd_type, function(val,key) { checked_items+=","+key; }); |
Now complete post action inside the respective controller will look like this
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$scope.submit_form = function() { $http({ url: base_url+"services.do/add_business",//or your service url method: "POST", processData: false, headers: { 'Content-Type': undefined }, data : $scope. postAdd,//it will get all other normal text or select inputs in the form form using common modal >> postAdd transformRequest: function (data) { var formData = new FormData(); //collect the radio opted value data in a var var single_option= $scope. postAdd.condition1;//it will come directly because same group for radio will get only the selected value formData.append(“item_condition”, single_option); //collect the checkboxes data in a var with comma seperated var checked_items=””; angular.forEach($scope. postAdd .prd_type, function(val,key) { checked_items+=","+key; }); formData.append(“item_types”, checked_items); return formData; }, }).success(function(data, status, headers, config) { //success callback, show success or alert depends on return data in first callback response named > data console.log("form submitted successfully"); }).error(function(data, status, headers, config) { //error callback here console.log("Error in form process"); }); } |
you can ask any confusion and if something not clear then put your query in comments , i will type to reply on same and try to resolve your problem where you stucked
