Creating dynamic forms with angularjs

Question

So Im creating dynamic forms with angularjs. And when the form is sent, I delete it from the array. But for some odd reason forms validation rules somehow "stick" to the next form. For example. I send the first form, The second form now gets validated if the third form has valid answers, and so on if the 4th form has valid answers the 3th form will be valid. What could be the possible reasons for this?

This is pretty much striped down code to the basics of what I have

<div ng-repeat="item in ItemsAdder.items track by $index" ng-form="item.itemForm">
<div class="form-group control-group">
    <label for="category" class="col-sm-2 control-label">{{trans('adsAdd.category')}}</label>
    <select ng-options="category.name for category in categories track by category.id" ng-init="item.category=categories[0]" ng-model="item.category"></select>
</div>
<div class="form-group control-group" ng-class="{ 'has-error' : item.itemForm.price.$invalid && !item.itemForm.price.$pristine }">
    <label for="price" class="col-sm-2 control-label">Price</label>
    <input ng-model="item.price" ng-class="{ 'has-error' : item.itemForm.price.$invalid && !item.itemForm.price.$pristine }" required type="number" ng-trim="false" name="price">
    <p ng-show="item.itemForm.price.$error.number && !item.itemForm.price.$pristine" class="help-block">{{trans('items.add.priceNeedsToBeNumber')}}</p>
    <p ng-show="item.itemForm.price.$error.required && !item.itemForm.price.$pristine" class="help-block">{{trans('items.add.priceNeeded')}}</p>
</div>
<div class="form-group control-group" ng-class="{ 'has-error' : item.itemForm.description.$invalid && !item.itemForm.description.$pristine }">
    <label for="description" class="col-sm-2 control-label inputLabel">Description</label>
    <textarea ng-minlength="3" ng-class="{ 'has-error' : item.itemForm.description.$invalid && !item.itemForm.description.$pristine }" ng-model="item.description" name="description" required class="inputInput" style="max-width: 100%;"></textarea>
    <p ng-show="item.itemForm.description.$error.required && !item.itemForm.description.$pristine" class="help-block">{{trans('items.add.descriptionNeeded')}}</p>
</div>
<button ng-click="ItemsAdder.send($index)" ng-disabled="item.itemForm.$invalid">{{trans('adsAdd.send')}}</button>
</div>

And my send function:

ItemsAdderFactory.prototype.send = function ($index) {
                    var self = this;
                    var responsePromise = $http.post("",this.items[$index]);
                    responsePromise.success(function (data, status, headers, config) {
                        self.items.splice($index, 1);
                    });
                    responsePromise.error(function (data, status, headers, config) {
                        alert('There was an error, please try again.');
                    });
                };

Btw I have the ng-form="" as item.ItemForm so I could access the form through items when a Send All Button is pressed, and it checks what forms are valid and only sends those. If there Is a different or a propper way of doing it, Im all ears.

Answer 1

So guys, I found out the answer. And I'm going to leave it here if anyone else gets this. The problem was because I was using track by $index in the ng-repeat and I guess the form validation wanted to stick around because the index didn't change.

So don't use track by $index in ng-repeat if your having these problems.

Answer 2

When you delete the submitted from the array ItemsAdder.items remember that the ng-repeat has two way binding so it resets the array and now the 1st index item becomes the 0th index item.

This is best guess about the problem you are facing.