Appended input field elements are not working in angularjs

Question

I am creating form in angularjs. In that, I am creating add more fields functionality by clicking on "Add more" button. I've implemented add more functionality using javascript. Below is the code for HTML:

<form method="POST" name="form" ng-submit="insert(user)" role="form">                              
    <div class="top_gets" id="innerdivs">                                                                                                                                                                                                                  
        <input ng-model="user.amount"  type="text"/>                                                                                                                                            
        <input ng-model="user.description" type="text"/>                                                                                                                                                                                                                                                                                                                                                                                       
        <input type="submit" onclick="addMore();" value="Add more"/>
        <input type="submit" value="Save & Continue" class="save_gets" />                                                                                                                                                                                                                          
    </div>  
</form>

Below is Javascript Code:

<script>
    var counter = 0;
    function addMore() {
        counter += 1;
        var div = document.getElementById('innerdivs');
        var innerdiv = '<div id="innerdivs"><!-- Same Form Field Elements---></div>';
        $('#innerdivs').append(innerdiv);
    }
</script>

My problem is, whenever I add more fields by clicking on "Add more" button and submit the form, then only first loaded input fields posts/sends the data means newly appended field input does not posts the data. Whatever the fields are appended using javascritpt that won't works that is form does not sends/posts the inputs. This works with core PHP but it does not works in angularjs. Is there any way to fix this in angularjs?

Are you adding name attributes to the created inputs? Also, your div variable is unnecessary if you are using a jQuery selector. — Lee
– Lee, Commented Sep 16, 2015 at 8:41
ya I am adding name. And I also adding ng-model with increment counter in javascirpt — Omkar
– Omkar, Commented Sep 16, 2015 at 8:42
As a guess, I'd say it's because your template is not compiled once you're adding elements outside the angular context. Try having a div with an ng-repeat, and have the button push an object to an array that angular is already watching, and bind to that. — Lee
– Lee, Commented Sep 16, 2015 at 8:50

karaxuna · Accepted Answer · 2015-09-16 08:54:51Z

You are doing it absolutely wrong. You shall not add dom elements manually. Instead, you shall have array in controller and push new object in it:

<form name="form" ng-submit="save(users)" role="form" ng-controller="addUserCtrl">
    <div class="top_gets" ng-repeat="user in users">
        <input ng-model="user.amount" type="text" />
        <input ng-model="user.description" type="text"/>
        <input type="button" ng-click="addMore();" value="Add more" />
        <input type="submit" value="Save & Continue" class="save_gets" />
    </div>
</form>

In controller:

angular.module(<module_name>).controller('addUserCtrl', ['$scope', function (scope) {
    scope.users = [{}];
    scope.addMore = function () {
        scope.users.push({});
    };
    scope.save = function () {
        // send `scope.users` to server with $http or $resource
    };
}]);

Collectives™ on Stack Overflow

Appended input field elements are not working in angularjs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related