How to create json object for html form using AngularJS?

Question

I am learning angularJS now a days. How can I create a json object for my given html form. I can do it with jQuery, but I need to do this in AngularJS, kindly let me know that how can I do this in angularJS and Thanks in advance.

How is this specific to Angular? Are you using jQuery in your project? See this: http://stackoverflow.com/questions/11661187/form-serialize-javascript-no-framework — Roope, Apr 05 '16 at 11:24
@Roope, I need to create json object with AngularJS instead of with jQuery, is there any way to create with AngularJS only ? — Dhana, Apr 05 '16 at 11:27
@Dhana JQuery lite is built-in with AngularJS. So doing it with jQuery when in Angular universe won't harm. — Himel Nag Rana, Apr 05 '16 at 11:32
@Dhana, you might be interested in: http://stackoverflow.com/questions/12141035/angularjs-serialize-form-data — Himel Nag Rana, Apr 05 '16 at 11:33

Arun Shinde · Accepted Answer · 2016-04-05T12:12:18.710

Better without serialize you can do like this using ng-model.

var app = angular.module('demoApp', []);

app.controller('demoController', function($scope) {
  $scope.formData = {}
  $scope.serialize = function($event){
    console.log($scope.formData)
    alert(JSON.stringify($scope.formData))
    $event.preventDefault()
  }
});

<!DOCTYPE html>
<html ng-app="demoApp">

<head>

  <script src="https://code.angularjs.org/1.4.9/angular.js" ></script>
</head>

<body ng-controller="demoController">
  <h2>Form</h2>
  <form action="" method="post" id="formid" name="testForm">
    First Name:
    <input type="text" ng-model="formData.Fname" maxlength="50" size="12" />
    <br/> Last Name:
    <input type="text" ng-model="formData.Lname" maxlength="50" size="12" />
    <br/> Select a Level of Education:
    <br/>
    <select ng-model="formData.education">
      <option value="Jr.High">Jr.High</option>
      <option value="HighSchool">HighSchool</option>
      <option value="College">College</option>
    </select>
    <br/>
    <p>
      <input type="submit" ng-click="serialize($event)" />
    </p>
  </form>
</body>

</html>

score 1 · Answer 2 · edited May 23 '17 at 11:52

I dont see a need to serialize form data we can set a object in controller and add model as properties in to it. Here is the Codepen.

View :

<form name="contactForm" class="col-md-6" ng-app="app" ng-controller="bodyCtrl">
  <div class="form-group">
    <label for="exampleInputEmail1">Firstname</label>
      <input type="text" class="form-control" ng-model="simpleForm.first_name">
  </div>
   <div class="form-group">
      <label for="exampleInputPassword1">Lastname</label>
        <input type="text" class="form-control" ng- model="simpleForm.last_name">
  </div>
  <div class="form-group">
   <select class="form-control" name="" id="" ng-options="option.value as option.label for option in educationOptions" ng-   model="simpleForm.education">
     </select>
  </div>
 <button type="submit" class="btn btn-default" ng-click="toggleShow()">Submit</button>
  <pre ng-hide="!show">
      <code>
     {{simpleForm|json}}
     </code>
  </pre>

Controller :

var app = angular.module('app', []);

 app.controller('bodyCtrl', function($scope) {
 $scope.show = false;
 $scope.simpleForm = {};
 $scope.educationOptions = [{
'label': 'Jr.High',
'value': 'Jr.High'
 }, {
'label': 'HighSchool',
'value': 'HighSchool'
 }, {
'label': 'College',
'value': 'College'
}]
 $scope.simpleForm.education = $scope.educationOptions[0].value;
 $scope.toggleShow = function() {
   $scope.show = !$scope.show
  }
})

You might want to refer to this link for more on data binding.And this one if you are coming from jQuery background.

How to create json object for html form using AngularJS?

2 Answers2