AngularJS - Dynamically added inputs on form, collect data from all inputs on single submit

Question

I'm working on a "Contacts" form in Angular that should:

-Allow user to dynamically add and remove a contact entry.

-A single contact entry will have an input for each of the following:

*first name

*last name

*phone number

-Each contact can have an arbitrary number of phone numbers, so these inputs can be dynamically added or removed by user, similar to the parent contact item.

-All form data can be captured/registered from a single 'submit' button that handles the entire form, instead of having to press 'add' on each individual contact item.

In a nutshell, there can be an arbitrary number of contacts, and each contact can have an arbitrary number of phone numbers, and there should be only one 'submit' button for all data.

Is this possible in Angular? I know how to achieve this with Jquery but am having trouble understanding how this would be done with Angular. I've seen solutions that approximate what I'm looking for, but most of them include the addition of only a single input (instead of a set of inputs), and none of them have the single submit button functionality.

Would prefer not to have to use Jquery. Any suggestions?

Thanks!

score 0 · Answer 1 · answered Apr 04 '16 at 15:53

Here is a sample code

<tr ng-repeat="contact in ContactList"  >  
      <td>
            <input ng-model="contcact.firstName">
      </td>
      <td>
            <input ng-model="contcact.lastName">
      </td>
 </tr>

....

<!---click button--->
<button ng-click="AddContact()">

your controller ...

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

myApp.controller('Example', ['$scope', function($scope) {
$scope.ContactList = [{firstName: 'aaa' ,lastName:'bbb'}];
$scope.AddContact = function(){ var NewContact ={firstName: 'aaa' ,lastName:'bbb'} ;
$scope.ContactList.push();  
}
}]);

Thanks for the suggestion. – Murcielago Apr 04 '16 at 23:54 — Murcielago, Apr 04 '16 at 23:54

Hadi J · Accepted Answer · 2016-04-04T16:03:07.880

i have before similar problem and solve as this. i hope that help you.

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

/**
 * Created by Hadi on 7/28/2015.
 */

app.controller("MainController",['$scope','$http',function($scope,$http){

    $scope.formData = {
        info:[
            {
                name:"",
                family:"",
                phones:[
                    {
                       phone:"" 
                    }
                ]
            }
        ]
    };

    $scope.addItem = function(index){
        if($scope.formData.info[index+1] == null) {
            $scope.formData.info.push(
                {
                  name:"",
                  family:"",
                  phones:[
                    {
                       phone:"" 
                    }
                  ]
            });
        }
    };
  $scope.removeItem = function (index) {
        $scope.formData.info.splice(index, 1);
    };
    $scope.addPhone = function (index, index2) {
        var newphone = {
            phone:""
        };
        if ($scope.formData.info[index].phones[index2 + 1] == null)
            $scope.formData.info[index].phones.push(newphone);

    };
    $scope.removePhone = function (index1, index) {
        $scope.formData.info[index1].phones.splice(index, 1);
    };

   
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">
   <table border="1">
     <tr ng-repeat="item in formData.info track by $index">
        <td> <input type="button" ng-click="removeItem($index)" value="Delete Contact" ng-show="$index > 0"></td>
        <td> <input type="button" ng-click="addItem($index)" value="Add New Contact" ng-show="$last"></td>
        <td> <input type="text" ng-model="formData.info[$index].name"></td>
        <td><input type="text" ng-model="formData.info[$index].family"></td>
        <td > 
          <table>
          <tr ng-repeat="phone in formData.info[$index].phones">
            <td> <input type="text" ng-model="phone.phone"></td>
            <td> <input type="button" ng-click="addPhone($parent.$index,$index)" value="Add Phone" ng-show="$last"></td>
            <td> <input type="button" ng-click="removePhone($parent.$index,$index)" value="Delete Phone" ng-show="$last"></td>
            </tr>
          </table>
         
       </td>
       
        <td> <input type="button" ng-click="deleteRow($event,$index)" value="Delete Phone" ng-show="$index != 0"></td>
     </tr >
     
   </table> 
  <pre>{{formData | json}}</pre>
</div>

Thank you so much for your help! This saved me countless hours and taught me a lot about how to work with nested scopes within ng-repeat and corresponding indices. ***One thing to note that still confuses me: In the controller, you MUST define the empty 'item' object INSIDE of the addItem function. If you define it outside of the function, all subsequent inputs will be tied to the same ng-model. I don't totally understand this behavior. Any thoughts? — Murcielago, Apr 04 '16 at 23:51
because of object scope. for more info see http://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript — Hadi J, Apr 05 '16 at 04:23
Unfortunately I can't upvote because I don't have enough street cred. Best I can do is mark it correct. Thank you again! — Murcielago, Apr 05 '16 at 18:58

AngularJS - Dynamically added inputs on form, collect data from all inputs on single submit

2 Answers2