getting data from dynamically added form in angular

Question

I'm developing an app using MEAN stack. I'm able to add form elements dynamically but cannot get inserted data in my ng-model. if i put ng-model="something.something" then every dynamically added form elements takes same data. I wish to take data as in form of object inside a array.I would really appreciate any response.

Here is my html code:

  <div layout-gt-sm="row" ng-repeat="(key,aca) in vm.academic">
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Degree</label>
                    <input name="degree" ng-model="vm.academic[key].degree">
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>University/Board</label>
                    <input name="university" ng-model="vm.academic[key].university">
                </md-input-container>
                <md-input-container class="md-block" flex-gt-sm>
                    <label>Percentage/Grade</label>
                    <input name="grade" ng-model="vm.academic[key].grade">
                </md-input-container>
            </div>
            <div layout="row" layout-align-gt-sm="end">
                <md-button class="btn1" aria-label="add button" ng-click="vm.add();">
                    <md-icon md-svg-icon="plus"></md-icon>
                    <md-tooltip md-direction="top">
                       Add more field
                    </md-tooltip>
                </md-button>
            </div>

and my js code is

   vm.academic = [{}];
   vm.add = add;

    function add() {
    console.log('button clicked');
    vm.academic.push({
        degree:'',
        university:'',
        grade:''
    });
};

How do I get a different ng-model for different fields to save the data in database?

Please find [here demo](http://jsfiddle.net/austinnoronha/RkykR/) to have detail about how to iterate over arrray and bind value into form using ng-repeat. — TechnoCrat, May 09 '16 at 11:45

score 1 · Accepted Answer · answered May 09 '16 at 11:50

1

This is the html code that would help you format you html

 <form name="FormName" novalidate>
        <div layout-gt-sm="row" ng-repeat="aca in vm.academic">
            <md-input-container class="md-block" flex-gt-sm="">
                <label>Name</label>
                <input type="text" ng-model="aca.name" >
            </md-input-container>
            <md-input-container class="md-block" flex-gt-sm="">
                <label for="email">Email Id</label>
                <input type="email" ng-model="aca.email"/>
            </md-input-container>
        </div>
    </form>

And in you controller initialize vm.academic = [{}]; And call add and remove methods as follows

vm.addNewAcademic = function(){
   vm.academic.push({});
};
vm.removeAcademic = function() {
   var num = vm.academic.length-1;
   if ( num !== 0 ) {
      vm.academic.pop();
   }
};

You'll get in output result as [{'name':'a','email':'bb'},{'name':'c','email':'dd'}]

answered May 09 '16 at 11:50

Rakesh Chand

3,105
1
20
41

hello brother it again troubles me sending data to the server. how can i send ng-model data. i have long form which have ng-model="vm.recruit.formElement". how to send data along with vm.recruit – kisor May 11 '16 at 11:44
vm.recruit must be a dictionary object send this to server directly. What's difficulty in it? – Rakesh Chand May 11 '16 at 11:48
well i am able to send data to node server. but i am using mongoose and mongodb for data storage. i am not able to save form-elements into array of schema. here is my server code: – kisor May 12 '16 at 11:24
i will post another question for this my code occupies more characters than it is allocated. – kisor May 13 '16 at 06:30

getting data from dynamically added form in angular

1 Answers1