how to add ng-model to dynamically created input text fields

Question

This is my angularjs code to create input text fields dynamically.

<form action="demo_form.asp" method="get">
    //statically added textfields
    value1:<input type="text" placeholder="Give inspection details. Eg. 10:00." ng-model="store.static1" required />
    value2:<input type="text" placeholder="Give inspection details. Eg. 10:00." ng-model="store.static2" required />

    //dynamically adding textfields
    enter the number of new fields to be created:<input type="number" id="in_num"  />
    <button type="button" id="submit"> Create text fields </button>
    <div id="dynamicInput" ></div></td>

    //button to add values to the database
    <button type="submit" ng-click="addValues($event)> add to database </button>
</form>

"ng-click="addValues($event)"" helps add these values to a mongodb database which i have already done.

javascript code used to make these fields is:

 $(document).ready(function(e){
$('#submit').click(function(){     
 var inputIndex = $('#in_num').val();
    for( var i=0; i<inputIndex; i++)
    {
      $('#dynamicInput').append('<input type=text  id=id_'+ i +' style=width:100%; padding:12px 15px  ng-model=store.value'+i+'/>');
    }
});
});

On clicking the "add to database" button the values only from first and second textfields are geting added to the database but not the values added from the dynamically created textfields. Is there any way to do it?

You're mixing jquery and angular in a way that doesn't work very well. There's no clean workaround for that. — Dvid Silva
– Dvid Silva, Commented Nov 29, 2016 at 9:21
Suggestion: Instead of generating elements with jQuery, you can create an array of object and loop though ng-repeat! model will get set there! — Dhaval Marthak
– Dhaval Marthak, Commented Nov 29, 2016 at 9:22

oshell · Accepted Answer · 2016-11-29 10:05:48Z

Problem is that your dynamically added input fields do not have a click event when you add them with jQuery. Adding ng-click is not enough. You would have to use $compile to let angular parse this element.

However, the much smarter way is to not use jQuery at all and let the fields be generated by angular itself with ng-repeat.

angular
  .module('app', [])
  .controller('dynamicFieldsController', dynamicFieldsController);

dynamicFieldsController.$inject = ['$scope'];

function dynamicFieldsController($scope){
  var vm = this;
  vm.numOfFields = 0;
  vm.fields = [];
  vm.add = function() {
    for (var i = 0; i < vm.numOfFields; i++) {
        var index = vm.fields.length;
        vm.fields.push(index);
    }
  }
}

input{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='dynamicFieldsController as vm'>
  <input placeholder='num of fields' ng-model='vm.numOfFields'>
  <button ng-click='vm.add()'>add</button>
  <input type='text' ng-repeat='field in vm.fields' value='{{ field }}'>
</div>

In this example you can add any number of elements and bind ng-click events to them. They will work out of the box, since parsed with angular. Your addValues function now simply has to use vm.fields to actually add the values to database.

Community · Accepted Answer · 2017-05-23 10:30:11Z

0

Why don't you go through Add new text box on click of a button in angular js

http://www.shanidkv.com/blog/angularjs-adding-form-fields-dynamically

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Nov 29, 2016 at 9:24

Jigar7521

1,5791 gold badge14 silver badges29 bronze badges

Collectives™ on Stack Overflow

how to add ng-model to dynamically created input text fields

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related