Проверять только видимые элементы управления в AngularJS

Я новичок в AngularJS, и, возможно, я об этом поступил неправильно, но у меня проблемы с подтверждением формы.

У меня есть одна форма, содержащая несколько DIV. Каждый DIV представляет страницу в потоке формы. У меня есть одна кнопка Next, чтобы перейти на следующую страницу (DIV).

Страница отображается на основе поля "текущая страница" в области $scope, например.

<form> 
    <div ng-show="currentpage == 1">
        <input type="text" required />
    </div>
    <div ng-show="currentpage == 2">
        <input type="text" required />
    </div>
    <button ng-disabled="??" ng-click="next()" />
</form>

Я хочу нажать кнопку "Далее", чтобы активировать проверку формы только на видимых элементах DIV, а не на скрытых. Отключение кнопки "Далее" на основе состояния проверки видимых элементов управления идеально. Но как? Я очень хотел бы избежать использования JQuery в контроллере.

Спасибо!

Ответ 1

Мне кажется, что если вы можете иметь один из них пустым или пустым при представлении, это действительно не обязательно?

Вероятно, вы должны иметь каждый из них в отдельной форме. Потому что это звучит так, будто у вас есть какой-то условный подарок, основанный на том, что представляет собой текущая страница, которая будет поддерживать волосатый.

Вот пример проверки формы для каждой из двух форм. В этом примере каждая форма по-прежнему подчиняется одному и тому же методу, если вы действительно хотите, чтобы это было так, но я бы порекомендовал просто отправить их на свой собственный метод, вместо того, чтобы переводить все в инструкцию switch. В некоторых случаях я могу даже дать каждой форме свой собственный контроллер.

<form> 
    <div ng-show="currentpage == 1">
        <form name="page1Form" ng-submit="next(currentPage)">
           <input type="text" name="item1" ng-model="item1" required />
           <span ng-show="page1Form.item1.$dirty && page1Form.item1.$error.required">required</span>
           <button type="submit" ng-disabled="page1Form.$invalid">Submit</button>
        </form>
    </div>
    <div ng-show="currentpage == 2">
        <form name="page2Form" ng-submit="next(currentPage)">
           <input type="text" name="item2" ng-model="item2" required />
           <span ng-show="page2Form.item2.$dirty && page2Form.item2.$error.required">required</span>
           <button type="submit" ng-disabled="page2Form.$invalid">Submit</button>
        </form>
    </div>
</form>

Ответ 2

Можно также установить значение ng-required для значения, которое истинно для условного представления/отображения. Таким образом, проверка не проходит.

Затем при отправке нежелательные поля могут быть удалены из объекта формы $scope. Чтобы сделать его чище и проще в обслуживании, можно было бы иметь массив, содержащий альтернативный набор требуемых/необязательных атрибутов для данного условия.

Таким образом можно было бы сделать только одну форму.

Ответ 3

 <!DOCTYPE html>
 <html ng-app="myapp">
 <body>
  <form name="myForm" data-ng-controller="formController" novalidate> 
    <div ng-show="currentpage==1">
       Page1<input type="text" ng-model="page1" ng-required="currentpage==1"/>
     </div>
    <div ng-show="currentpage=='2'">
        Page2<input type="text" ng-model="page2" ng-required="currentpage==2"/>
    </div>
  <input ng-disabled="myForm.$invalid" type="submit" value="NEXT" ng-click="next()"/>
</form>
</body>
</html>

Попробуйте это.

Обратите внимание:

нг-требуется = "CurrentPage == 1" а также нг-требуется = "CurrentPage == 2"

ng-required работает так же, как ng-show. Поэтому, когда текущая страница == 1 истинно, поле в первом div имеет ng-required = "true", тогда как поле во втором div имеет ng-required = "false".

Аналогично, при нажатии следующей, когда текущая страница == 2, поле во втором div становится обязательным, так как ng-required = "true", тогда как для поля в первом div, ng -Обязательные = "ложь".