Создание динамических форм с угловыми

Question

Итак, Im создает динамические формы с угловыми. И когда форма отправлена, я удаляю ее из массива. Но по какой-то нечетной причине правила проверки достоверности каким-то образом «прилипают» к следующей форме. Например. Я отправляю первую форму. Вторая форма теперь проверяется, если в третьей форме есть действительные ответы и т. Д., Если у 4-й формы есть действительные ответы, 3-я форма будет действительна. Каковы могут быть возможные причины для этого?

Это в значительной степени полосатые вниз код основы того, что у меня есть

<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> 

И моя функция отправки:

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 Я имею нг-форму = «» в качестве пункта. ItemForm, чтобы я мог получить доступ к форме через элементы, когда нажата кнопка «Отправить все», и проверяет, какие формы являются действительными и только отправляет их. Если есть другой способ или способ помочь, Im все уши.

Answer 1

Итак, ребята, я узнал ответ. И я собираюсь оставить его здесь, если кто-нибудь еще это получит. Проблема была в том, что я использовал трек по индексу $ в ng-repeat, и я думаю, что проверка формы хотела придерживаться, потому что индекс не изменился.

Так что не используйте track by $index в ng-repeat, если у вас есть эти проблемы.

Answer 2

Когда вы удаляете представленные из массива ItemsAdder.items, помните, что ng-repeat имеет двустороннюю привязку, поэтому он сбрасывает массив, и теперь первый элемент индекса становится 0-м индексом.

Это лучшее предположение о проблеме, с которой вы сталкиваетесь.