Угловой пользовательский интерфейс начальной фокусировки неверной вкладки при отправке

0

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

Вот мой html файл:

<uib-tabset justified="true"> 
  <uib-tab heading="{{ 'PERSONAL_INFORMATION' | translate }}">
    inputs...
  </uib-tab> 
  <uib-tab heading="{{ 'BANK_ACCOUNTS' | translate }}">
    inputs...
  </uib-tab> 
  <uib-tab heading="{{ 'CONNECTIVITY' | translate }}">
     inputs...
  </uib-tab>
</uib-tabset>

Директива, которая фокусируется на первом недопустимом вводе:

app.directive('focus', function() {
    return {
        restrict : 'A',
        link : function(scope, elem) {
            // set up event handler on the form element
            elem.on('submit', function() {

                // find the first invalid element
                var firstInvalid = elem[0].querySelector('.ng-invalid');

                // if we find one, set focus
                if (firstInvalid) {
                    firstInvalid.focus();
                }
            });
        }
    };
});

Буду признателен за любую помощь.

Теги:
validation
focus
angular-ui-bootstrap-tab

2 ответа

0

после того, как вы идентифицируете первый недопустимый элемент с

var firstInvalid = elem[0].querySelector('.ng-invalid'); вы можете найти контроллер вкладки, к которой он принадлежит:

var tab = angular.element(firstInvalid).parents('div.tab-pane').scope().tab

и вы можете вызвать эту функцию выбора контроллера:

tab.select()

Это выберет вкладку, содержащую элемент firstInvalid, который, я думаю, означает то, что вы подразумеваете под "фокусом вкладки".

У меня было еще одно требование: показать все вкладки, содержащие недействительные элементы управления, с background-color. Это сложнее, так как вам нужно идентифицировать <li> содержащий заголовок вкладки, и область вкладок не имеет ничего, идентифицирующего элемент.

Я отметил каждую вкладку следующим классом:

<uib-tab ng-repeat="(roomtype, roominfo) in data.roomtypes track by roomtype" heading="{{roominfo.title}}" class="roomtype-{{roomtype}}" >

и свойство roomtype вкладки, содержащей недопустимый элемент управления,

var roomtype = tab.$parent.roomtype;

и я могу установить класс для указания недопустимого типа:

angular.element('li.roomtype-' + roomtype).addClass('tab-invalid'); Это утверждение основывается на загрузке полного jQuery, поскольку jqLite не выполняет поиск с помощью селектора CSS.

0

Если я правильно понимаю ваш вопрос, вы хотите сосредоточиться на первой вкладке, содержащей недопустимый элемент. Для этого дайте каждой вкладке директиву ngForm.

Это заставит родительский контроллер формы проверять каждую из вкладок как независимую форму (хотя они будут продолжать принадлежать родительскому контроллеру). Таким образом, каждый из них будет обрабатываться как форма, которая также получит класс ng-invalid. Предполагая, что ваши вкладки являются настраиваемыми, он должен работать.

<form name="myForm" test>
    <uib-tabset justified="true"> 
      <uib-tab heading="{{ 'PERSONAL_INFORMATION' | translate }}" ng-form="form1">
          inputs...
      </uib-tab> 
      <uib-tab heading="{{ 'BANK_ACCOUNTS' | translate }}" ng-form="form2">
          inputs...
      </uib-tab> 
      <uib-tab heading="{{ 'CONNECTIVITY' | translate }}" ng-form="form3">
          inputs...
      </uib-tab>
    </uib-tabset>
</form>

Вы можете увидеть (по общему признанию, рудиментарный) пример этого плунжера.

  • 0
    Я не думаю, что это работает для <uib-tabset> потому что элементы формы не являются потомками элемента tab.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню