Angularjs ng-repeat creating multiple forms

Question

Using ng-repeat I am creating bunch of forms with values in it. With each form there is also button to add rows to that particular form with new fields. Code is below

HTML:

<div ng-repeat="cont in contacts">
    <form ng-submit="newContact()">
        <input type="text" class="xdTextBox" ng-model="cont.ac"/>
        <input type="text" class="xdTextBox" ng-model="cont.cat"/>
        <input type="text" class="xdTextBox" ng-model="cont.loc"/>
        <button type="submit">Submit</button>
        <a href ng-click="addFields()">Add</a>
    </form>
</div>

Javascript:

$scope.contacts = [{ ac: '', auth: '', autname: ''}];
$scope.tasks = [];
$scope.addFields = function () {
    $scope.contacts.push({ ac: '', auth: '', autname: '' });
    console.log($scope.contacts);
}

It is creating all the forms and the rows are added however there are two problems.:

When I add to new row of fields it actually adds the row to all the forms created by ng-repeat.
When i type in the field or inserted fields it copys the text to all the sub forms.

Please let me know how i can fix it so that when add button is pressed only row in that particular form is created and when i enter text in the fields of newly pushed fields it only binds it to that particular one not to all the ones created. Thanks

Is this an oversimplification of your code? If you're pushing the same object into $scope.contacts instead of a new object literal as in your example, then that would explain what you're seeing. — Jacob
– Jacob, Commented Feb 28, 2014 at 9:40
@RGraham He tries to do something else ( add rows to only one form ) — Ilan Frumer
– Ilan Frumer, Commented Feb 28, 2014 at 9:40
@RGraham just ignore the code and read the OP's explanation: With each form there is also button to add rows to that particular form with new fields. this question lacks details like what fields should be added to each form? — Ilan Frumer
– Ilan Frumer, Commented Feb 28, 2014 at 9:46

Ilan Frumer · Accepted Answer · 2014-02-28 10:08:02Z

7

Maybe I didn't understand the question right but What I think you need is a model with multiple forms of multiple contacts.

Here is a plunker: http://plnkr.co/edit/fETiSYVW7Y5C1yTCwizd?p=preview

So you need nested repeaters:

<form name="{{form.name}}"
      ng-repeat="form in forms">

  <h2>{{form.name}}</h2>
  <div ng-repeat="cont in form.contacts">
          <input type="text" class="xdTextBox" ng-model="cont.ac"/>
          <input type="text" class="xdTextBox" ng-model="cont.cat"/>
          <input type="text" class="xdTextBox" ng-model="cont.loc"/>

  </div>
  <button ng-click="submit(form)">Submit</button>
  <button ng-click="addFields(form)">Add</button>
  <hr>
</form>

And the model looks like so:

app.controller('MainCtrl', function($scope) {

    $scope.forms = [{
      name: "form1",
      contacts:[{ ac: '', auth: '', autname: ''}]
    },{
      name: "form2",
      contacts:[{ ac: '', auth: '', autname: ''}]
    },{
      name: "form3",
      contacts:[{ ac: '', auth: '', autname: ''}]
    }];

    $scope.addFields = function (form) {        
        form.contacts.push({ ac: '', auth: '', autname: '' });
    };

    $scope.submit = function(form){
      console.log(form.contacts);
    };
});

edited Feb 28, 2014 at 10:08

answered Feb 28, 2014 at 10:02

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

1 Comment

Anatoly Over a year ago

And if you need submit all the forms at the same time, is it possible? Suppose at least one form has file which should be uploaded. For example by using ng-file-upload directive.

Wilfred Springer · Accepted Answer · 2015-10-30 10:54:07Z

1

You could also use this, and just add an autoextra attribute to you ng-repeat. New entries will be added on demand.

answered Oct 30, 2015 at 10:54

Wilfred Springer

10.9k6 gold badges58 silver badges70 bronze badges

Comments

Stephen Kaiser · Accepted Answer · 2014-02-28 10:36:09Z

I'm not sure I understand what you want to do correctly either, but it seems there are a few things not quite right here:

You are never adding cont.cat or cont.loc at any point, even when you initialize $scope.contacts, so the ng-models won't be bound to anything.
In order to add the fields to the specific row that you click the add button on, you need to merge the new fields/properties into the existing index of the $scope.contacts array and also use ng-if to add the input fields to the DOM

What about something like this?

    <div ng-app="MyApp">
        <div ng-controller="MyCtrl">
            <div ng-repeat="cont in contacts">
                <form ng-submit="newContact()">
                    <input type="text" class="xdTextBox" ng-model="cont.ac"/>
                    <input type="text" class="xdTextBox" ng-model="cont.cat"/>
                    <input type="text" class="xdTextBox" ng-model="cont.loc"/>
                    <input ng-if="cont.auth !== undefined" type="text" class="xdTextBox" ng-model="cont.auth"/>
                    <input ng-if="cont.autname !== undefined" type="text" class="xdTextBox" ng-model="cont.autname"/>
                    <button type="submit">Submit</button>
                    <a href ng-click="addFields($index)">Add</a>
                </form>
            </div>
       </div>
    </div>

And the controller's JS:

        var myApp = angular.module("MyApp", []);
        myApp.controller("MyCtrl", function($scope) {
            // These were previously { ac: '', auth: '', autname: ''}, which is what it seems you actually want to add after clicking.
            $scope.contacts = [{ ac: '', cat: '', loc: ''},{ ac: '', cat: '', loc: ''}];
            console.log($scope.contacts);
            $scope.tasks = [];
            $scope.addFields = function ($index) {
                $scope.contacts[$index] = angular.extend($scope.contacts[$index], { ac: '', auth: '', autname: '' });
                console.log($scope.contacts);
                console.log($index);
            };
        });

Here is the updated Fiddle: http://jsfiddle.net/j32SL/1/

stark0788 · Accepted Answer · 2014-02-28 14:25:26Z

0

Well imagine this as if you just copied and pasted your form over and over each time into the HTML. The model names don't change, and you're referring to the first element each and every time. You need to use $index to bind the correct form with its corresponding index either in your array or json.

answered Feb 28, 2014 at 14:25

stark0788

75 bronze badges

Collectives™ on Stack Overflow

Angularjs ng-repeat creating multiple forms

4 Answers 4

Here is a plunker: http://plnkr.co/edit/fETiSYVW7Y5C1yTCwizd?p=preview

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Here is a plunker: http://plnkr.co/edit/fETiSYVW7Y5C1yTCwizd?p=preview

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related