0

我正在尝试将包含无效字段的第一个选项卡集中在表单提交上。我确实设法专注于第一个输入字段，但如果该字段位于另一个选项卡中，它就不起作用而且我不知道如何使它起作用。

这是我的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();
                }
            });
        }
    };
});

我将不胜感激任何帮助。

4

2 回答 2

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>

您可以在这个 plunk 上看到一个（诚然是基本的）示例。

于 2015-11-02T02:27:18.653 回答
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}}" >

并且包含无效控件的选项卡的房间类型属性是

var roomtype = tab.$parent.roomtype;

我可以设置一个类来指示无效，例如：

angular.element('li.roomtype-' + roomtype ).addClass('tab-invalid'); 该语句依赖于加载完整的 jQuery，因为 jqLit​​e 不通过 CSS 选择器进行查找。

于 2016-01-24T06:02:03.223 回答