0

我正在显示基于这样的数组的输入

 <div data-ng-repeat="n in langInput.values">
    <input type="text"
           id="auction_name_{{n.selected}}"
           class="form-control"
           name="auction_name_{{$index}}"
           data-ng-model="inputs.auction_name[$index + 1]"
           data-ng-minlength="5"
           data-ng-maxlength="60"
           required />
    <span data-ng-show="sellItem['auction_name_'+$index].$error.required">Wymagane!</span>

它也给了我 angularjs 验证的能力。关闭后的下一步<form>我想创建“下一步”按钮，但我也想在那里进行验证，所以如果用户不填写所需的输入，他将无法点击它。

我正在ng-repeat处理的数组是：

$scope.langInput = {
    count: 3,
    values: [
        {
            id: "1",
            selected: "pl"
        },
        {
            id: "2",
            selected: "eng"
        }
    ],
    add: function () {
        if (this.count < 7) {
            this.values.push({id: this.count, selected: "eng"});
            this.count += 1;
            console.log(this.values);
        }
    },
    remove: function () {
        if (this.count > 2) {
            this.values.pop();
            this.count -= 1;
            console.log(this.count);
        }
    }
};

我知道我可以使用这个ng-disabled指令，但是我不知道如何检查循环中显示的输入，因为它的名称会根据循环而变化$index。

我已经创建了plunker

我的情况是，我知道当某些元素无效时我可以禁用按钮，ng-disabled="sellItem.$error"但是在实际项目中的表单中，我的表单更大，并且我有很多完成表单的方法，所以最终当用户完成填写表单时，用户仍然得到了一些甚至没有显示无效的输入。

所以我不能使用ng-disabled="sellItem.$error"，因为在用户完成表单后，他仍然在后台得到无效的输入。

我也不能将表单拆分为许多小表单，因为它会在提交时调用 1 个端点。

我在实际项目中所做的是注入 3 个不同的按钮并在正确的步骤中显示它们。每个按钮都需要禁用 ng 才能让用户在未完成步骤输入的情况下进入下一步。

因此，ng-disabled="sellItem.$error"我需要指定一步的 ng-disabled 中的所有输入（大约 5 个输入）。

所以它看起来像这样：

ng-disabled="sellItem.first_input.$error && 
sellItem.second_input.$error && ..."

我会这样做，但后来我遇到问题，我不能在里面“循环” ng-disabled，我想在里面“循环”，因为输入的名称是由 JS 生成的

name="auction_name_{{n.id}}"

它们变化而不是恒定的，用户可以添加更多输入并删除它们

在页面开始时，我有两个输入，在 JS 运行之后是name="auction_name_1"和name="auction_name_2"（由于绑定插值），然后用户可以和第三个name="auction_name_3"，所以我也不能在ng-disabled.

4

1 回答 1

0

我不知道如何检查循环中显示的这些输入，因为它的名称根据循环的 $index 而变化。

通常，将输入作为对象的属性存储在数组中，这样当对象在数组中的位置发生变化时，它就会与对象保持一致。

还要使用id对象的属性：

<form name="sellItem" ng-submit="submit()">
    <div data-ng-repeat="n in langInput.values">
        <input type="text"
             id="auction_name_{{n.selected}}"
             class="form-control"
             ̶n̶a̶m̶e̶=̶"̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶{̶{̶$̶i̶n̶d̶e̶x̶}̶}̶"̶
             name="auction_name_{{n.id}}"
             ̶d̶a̶t̶a̶-̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶i̶n̶p̶u̶t̶s̶.̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶[̶$̶i̶n̶d̶e̶x̶ ̶+̶ ̶1̶]̶"̶
             data-ng-model="n.input"
             data-ng-minlength="5"
             data-ng-maxlength="60"
             required />
        <span data-ng-show="sellItem['auction_name_'+n.id].$error.required">Wymagane!</span>
        <span data-ng-show="sellItem['auction_name_'+n.id].$error.minlength">Za krótkie!</span>
        <span data-ng-show="sellItem['auction_name_'+n.id].$error.maxlength">Za długie!</span>
    </div>
    <button type="submit" ng-disabled="sellItem.$error">
          {{Submit}}
    </button>
</form>

确保为id属性生成唯一值。

更新

添加了Submit按钮。

有关详细信息，请参阅

于 2018-06-22T13:40:34.740 回答