ng-отключен на входах из цикла ng-repeat

Я отображаю входные данные на основе массива, как это

 <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 петли.

Я создал плункер

Моя ситуация такова, что я знаю, что могу отключить кнопку, когда какой-то элемент недействителен ng-disabled="sellItem.$error" но в моей форме в реальном проекте эта форма намного больше, и у меня есть много способов создания формы, поэтому в конце, когда пользователь завершает заполнение формы, пользователь все еще получает некоторые входные данные, которые даже не отображаются неверными.

Так что я не могу использовать ng-disabled="sellItem.$error" потому что после пользовательской формы он все еще получал неверные данные в фоновом режиме.

Я также не могу разделить форму на множество маленьких форм, потому что она вызовет 1 конечную точку при отправке.

То, что я сделал в реальном проекте - это вставил 3 разные кнопки и показал их на правильном шаге. У каждой из этой кнопки должен быть отключен ng, чтобы пользователь не мог перейти к следующему шагу без завершения ввода шага.

Так что intead of 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,

Источник

1 ответ

Я не знаю, как я могу проверить эти входы, которые отображаются в цикле, потому что его имя меняется в зависимости от $ 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 имущество.

Обновить

Добавлена ​​кнопка Отправить.

Для получения дополнительной информации см.

Источник
Другие вопросы по тегам