Ng-repeat submit form with generated fields

Question

I have this issue, where i have a ng-repeat where i add some input fields and i want to submit the value of these inputs to the generated form - dosn't work with ng-model, but can i get by input name inside the form tag.

<li ng-repeat="group in tournament.groups">
    <form novalidate ng-submit="tournament.submit(group.team1, group.team2)">
        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x">
        </span> - <span>
            <input type="number" name="team2" placeholder="x">
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
    </form>
</li>

Answer 1

In the approach you have used you will be having multiple forms. I would suggest you to have only one form and iterate inside the form as follows :

<form name="team" novalidate ng-submit="tournament.submit(group.team1, group.team2)">
    <li ng-repeat="group in tournament.groups">

        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x" ng-model="team1"/>
        </span> - <span>
            <input type="number" name="team2" placeholder="x" ng-model="team2"/>
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
   </li>
</form>

And have the ng-model updated for each and every group accordingly using '$index' (as ng-model="team{{$index}}")

I guess this should do the trick.

Answer 2

Use ng-model:

View:

<li ng-repeat="group in tournament.groups">
    <form novalidate ng-submit="submit()">
        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x" ng-model="group.team1.name">
        </span> - <span>
            <input type="number" name="team2" placeholder="x" ng-model="group.team2.name">
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
    </form>
</li>

in controller:

$scope.submit = function(){
   console.log($scope.group.team1.name);
   console.log($scope.group.team2.name);
};

You will get your value. Try once my code.

Answer 3

You should bind the input using ng-model & name attribute of form is missing which because of which your ng-submit is not getting fire.

When you add name attribute to your form suppose name="team" at that time angular does create a new variable inside scope & add all the form related information about the validity of form & the information of each field.

Markup

<li ng-repeat="group in tournament.groups">
    <form name="team" novalidate ng-submit="tournament.submit(group.team1, group.team2)">
        <span>
            {{ group.team1.name }}
            <input type="number" name="team1" placeholder="x" ng-model="group.team1"/>
        </span> - <span>
            <input type="number" name="team2" placeholder="x" ng-model="group.team2"/>
            {{ group.team2.name }}
        </span>

        <button type="submit">Save</button>
    </form>
</li>