How to submit multiple form data using ng-model on one view

Question

Hi, I want to publish all form data with the same model name. this is my code in this i also cloned three tags to create more forms with the same name classes and Model.

<tr class="row_1"> <form name="myForm1" class="sub_job"> <td><input type="text" name="quantity" ng-model="job.quantity"/></td> <td><input type="text" name="quantity" ng-model="job.quality"/></td> </form> </tr> <tr class="row_1"> <form name="myForm2" class="sub_job"> <td><input type="text" name="quantity" ng-model="job.quantity"/></td> <td><input type="text" name="quantity" ng-model="job.quality"/></td> </form> </tr> <tr class="row_1"> <form name="myForm3" class="sub_job"> <td><input type="text" name="quantity" ng-model="job.quantity"/></td> <td><input type="text" name="quantity" ng-model="job.quality"/></td> </form> </tr> </tbody> </table> <!-- </form> --> <button class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button> <button class="btn btn-warning" onclick="cloneRow()" id="add_job">Add Row</button> 

angular code like this

  $scope.saveJob = function(data) { console.log(data); //http request goes here } 

Answer 1

You can achieve this with array and ng-repeat , rather than cloning an html element.

HTML

 <table><tbody> <tr class="row_1" ng-repeat="job in jobs track by $index"> <form name="myForm" class="sub_job"> <td><input type="text" name="quantity[]" ng-model="job.quantity"/></td> <td><input type="text" name="quantity[]" ng-model="job.quality"/></td> </form> </tr> </tbody></table> <button class="btn btn-primary" ng-click="save()" id="save_exit">Save & Exit</button> <button class="btn btn-warning" ng-click="clone()" id="add_job">Add Row</button> 

Angular Controller

 // You can fetch this array of jobs from server for showing purpose $scope.jobs = [ { quantity: "1.0" , quality: "A" }, { quantity: "2.0" , quality: "B" } ] $scope.clone = function(){ // You can change default values for new job to appear var empty = { quantity: "" , quality: "" }; $scope.jobs.push(empty); } $scope.save = function(){ // You can send this array of jobs to server for saving purpose console.log($scope.jobs); } 

Answer 2

EDIT: This structure is not very good. I think you are trying to create many rows and select a DOM table and datas. This is not an angular way!

How to do it with angular way

You need to define an array in your controller.

 $scope.jobList = []; 

You need to define a push method. Your save method works with the jobList array.

 $scope.addEmptyJob() = function(){ var newJob = {}; $scope.jobList.push(newJob); } 

You need to define a repeating td button and one submit.

 <form name="myForm_{{$index}}" class="sub_job"> <tr class="row_1" ng-repeat="job in jobList"> <td><input type="text" name="quantity" ng-model="job.quantity"/></td> <td><input type="text" name="quantity" ng-model="job.quality"/></td> <td> <button class="btn btn-warning" ng-click="addEmptyJob()" id="add_job">Add New Row</button> </td> </tr> <button type="submit" class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button> </form> 

OLD ANSWER for single save.

You need to define each shape using the button. And each form must be unique . That way you can use $index for unique. In the end, you need to add type = "submit" to the form control buttons.

 <tr class="row_1" ng-repeat="job in myArray track by $index"> <form name="myForm_{{$index}}" class="sub_job"> <td><input type="text" name="quantity" ng-model="job.quantity"/></td> <td><input type="text" name="quantity" ng-model="job.quality"/></td> <td> <button type="submit" class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button> <button type="submit" class="btn btn-warning" onclick="cloneRow()" id="add_job">Add Row</button> </td> </form> </tr> 

Answer 3

You cannot have a single model for several input elements, because if you change the value in any of the input fields, it will overwrite it with the last value. Assuming that you start filling out the form, starting from form1 to form3 and submit, the model will hold the value entered in the last used input field, i.e. form3.

To solve your problem, you need to use a collection, array or object (preferably an array) as your model.

Your controller will be something like this:

 var JobModel = function() { return { jobs: [], addRow: function() { var model = { quantity: "", quality: "", }; this.jobs.push(model); }, save: function() { console.log(this.jobs); }, submit: function(){ for(var i=0;i<this.jobs.length;i++){ doSomeHTTPRequest(this.jobs[i]); } } }; }; $scope.jobModel = new JobModel(); 

Your HTML will be something like:

 <button ng-click="jobModel.addRow()"> Add Job </button> <div ng-repeat="job in jobModel.jobs"> <input type="text" ng-model="job.quantity" placeholder="Quantity"> <input type="text" ng-model="job.quality" placeholder="Quality"> </div> <button ng-click="jobModel.save()"> Save Jobs </button> 

To submit a form with the same name, you will need to iterate over the array of tasks and make ajax calls for each