0

だから私はangularjsで動的フォームを作成しています。フォームが送信されたら、配列から削除します。しかし、何らかの奇妙な理由で、フォームの検証規則が何らかの形で次のフォームに「固執」します。例えば。最初のフォームを送信すると、3 番目のフォームに有効な回答がある場合は 2 番目のフォームが検証され、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.');
                    });
                };

ところで、私は ng-form="" を item.ItemForm として持っているので、[すべて送信] ボタンが押されたときにアイテムを介してフォームにアクセスでき、有効なフォームをチェックしてそれらのみを送信します。それを行う別の方法または適切な方法があれば、私はすべて耳を傾けます。

4

2 に答える 2