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

最初の無効な要素を特定した後

var firstInvalid = elem[0].querySelector('.ng-invalid'); それが属するタブのコントローラーを見つけることができます：

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

そして、そのコントローラの select 関数を呼び出すことができます:

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'); jqLit​​e は CSS セレクターによるルックアップを行わないため、このステートメントはロードされる完全な jQuery に依存しています。

于 2016-01-24T06:02:03.223 に答える