Question

所以我用angularjs创建动态表单。当表单发送时，我将其从数组中删除。但由于一些奇怪的原因形式验证规则不知何故＆＃34;坚持＆＃34;到下一个表格。例如。我发送第一个表格，第二个表格现在得到验证，如果第三个表格有有效答案，依此类推，如果第四个表格有有效答案，第三个表格将有效。可能的原因是什么？

这几乎是我所拥有的基础知识的条纹代码

<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.');
                    });
                };

是的，我有ng-form =＆＃34;＆＃34; as item.ItemForm所以当按下Send All按钮时我可以通过项目访问表单，它会检查哪些表单有效并且只发送它们。如果有不同的或正确的做法，我全都耳朵。

Answer 1

所以伙计们，我找到了答案。如果其他人得到这个，我会把它留在这里。问题是因为我在ng-repeat中使用 track by $ index ，我想表单验证想要坚持下去，因为索引没有改变。

因此，如果您遇到这些问题，请不要在ng-repeat中使用track by $index。

Answer 2

当您从数组ItemsAdder.items中删除提交时，请记住ng-repeat具有双向绑定，因此它会重置数组，现在第一个索引项成为第0个索引项。

这是对你所面临的问题的最佳猜测。

使用angularjs创建动态表单

2 个答案: