Tag: checkbox and radio use in angularjs form

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 :

<!— 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:

//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

$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