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 to have detail about how to iterate over arrray and bind value into form using ng-repeat. — TechnoCrat
– TechnoCrat, Commented May 9, 2016 at 11:45

Rakesh Chand · Accepted Answer · 2016-05-09 11:50:24Z

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 9, 2016 at 11:50

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kisor Over a year ago

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

Rakesh Chand Over a year ago

vm.recruit must be a dictionary object send this to server directly. What's difficulty in it?

kisor Over a year ago

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 Over a year ago

i will post another question for this my code occupies more characters than it is allocated.

Collectives™ on Stack Overflow

getting data from dynamically added form in angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related