web-dev-qa-db-ja.com

AngularJS UI Bootstrapツールチップを使用してフォーム入力エラーを表示する方法は？

たとえば、私は フォーム入力エラーを表示 というフォームを持っています。

エラーがある場合は、入力ラベルの近くに赤いバッジ（「ホバーしてエラーを表示」）を表示する必要があります。ユーザーがこの赤いバッジにカーソルを合わせると、 AngularJS UI Bootstrap tooltip を使用してエラーのリストが表示されます。エラーのリストをtooltip-htmlに入れたくない-unsafe属性。編集および保守が便利ではないため。

このコードはより宣言的です：

<validation-tooltip ng-show="appForm.number.$invalid && appForm.number.$dirty">
    <ul>
        <li ng-show="appForm.number.$error.required">this field is required</li>
        <li ng-show="appForm.number.$error.number">should be number</li>
        <li ng-show="appForm.number.$error.min">minimum - 5</li>
        <li ng-show="appForm.number.$error.max">miximum - 20</li>
    </ul>
</validation-tooltip>

このコードより：

<span tooltip-html-unsafe="{{<ul><li>This field is required;</li><li>...</li></ul>}}">hover to show errors</span>

AngularJS UIを使用してこのような検証ツールチップディレクティブを書くにはどうすればよいですかBootstrap tooltip？

または、検証エラーメッセージを維持するための別のアプローチを提案できますか？

angularjsangularjs-directivetooltipangular-ui-bootstrap
20
webvitaly

デモフィドル

検証ツールチップ指令

ValidationTooltipはメインのディレクティブです。次の責任があります。

  1. トランスクルードされたコンテンツを通じてツールヒントテンプレートを定義する
  2. 各ダイジェストサイクルで評価式を評価できるように、検証式を追跡します。
  3. ValiationMessageディレクティブが自分自身を登録できるようにするためのコントローラーAPIを公開する
  4. ディレクティブに「target」属性を指定して、バッジ（および関連するツールチップ）がバインドされるフォームフィールドを指定します

追記

ツールチップテンプレートは、リンク関数のトランスクルージョン関数を使用して、テンプレートをディレクティブのスコープにバインドします。テンプレートがバインドできるスコープ内の2つのプロパティがあります。

  1. $ form：親スコープで定義されたフォームモデルにバインドされます。つまり、$ scope.myForm
  2. $ field：親スコープのform.nameモデルにバインドされています。すなわち$ scope.myForm.myInput

これにより、テンプレートは、フォーム名または入力フィールド名を直接参照せずに、$ valid、$ invalid、$ pristine、$ dirty、$ errorなどの検証プロパティにバインドできます。たとえば、次の式はすべて有効なバインディング式です。

$ formプロパティ：

  • `$ form。$ valid`
  • `$ form。$ invalid`
  • `$ form。$ dirty`
  • `$ form。$ pristine`
  • `$ form。$ error.required`など...

$ fieldプロパティ：

  • `$ field。$ valid`
  • `$ field。$ invalid`
  • `$ field。$ dirty`
  • `$ field。$ pristine`
  • `$ field。$ error.required`など...

ディレクティブ実装

app.directive('validationTooltip', function ($timeout) {
    return {
        restrict: 'E',
        transclude: true,
        require: '^form',
        scope: {},
        template: '<span class="label label-danger span1" ng-show="errorCount > 0">hover to show err</span>',
        controller: function ($scope) {
            var expressions = [];
            $scope.errorCount = 0;
            this.$addExpression = function (expr) {
                expressions.Push(expr);
            }
            $scope.$watch(function () {
                var count = 0;
                angular.forEach(expressions, function (expr) {
                    if ($scope.$eval(expr)) {
                        ++count;
                    }
                });
                return count;

            }, function (newVal) {
                $scope.errorCount = newVal;
            });

        },
        link: function (scope, element, attr, formController, transcludeFn) {
            scope.$form = formController;

            transcludeFn(scope, function (clone) {
                var badge = element.find('.label');
                var tooltip = angular.element('<div class="validationMessageTemplate tooltip-danger" />');
                tooltip.append(clone);
                element.append(tooltip);
                $timeout(function () {
                    scope.$field = formController[attr.target];
                    badge.tooltip({
                        placement: 'right',
                        html: true,
                        title: clone
                    });

                });
            });
        }
    }
});

検証メッセージ指令

ValidationMessageディレクティブは、ツールチップに表示する検証メッセージを追跡します。 ng-ifを使用して、評価する式を定義します。要素にng-ifが見つからない場合、式は単にtrueと評価されます（常に表示されます）。

app.directive('validationMessage', function () {
    return {
        restrict: 'A',
        priority: 1000,
        require: '^validationTooltip',
        link: function (scope, element, attr, ctrl) {
            ctrl.$addExpression(attr.ngIf || true );
        }
    }
});

HTMLでの使用法

  1. 名前属性を持つフォームを追加する
  2. 1つ以上のフォームフィールドを追加します。それぞれに名前属性とng-modelディレクティブがあります。
  3. いずれかのフォームフィールドの名前を参照するtarget属性を持つ<validation-tooltip>要素を宣言します。
  4. オプションのvalidation-messageバインディング式を使用して、各メッセージにng-ifディレクティブを適用します。
<div ng-class="{'form-group': true, 'has-error':form.number.$invalid}">
    <div class="row">
        <div class="col-md-4">
            <label for="number">Number</label>
            <validation-tooltip target="number">
                <ul class="list-unstyled">
                    <li validation-message ng-if="$field.$error.required">this field is required </li>
                    <li validation-message ng-if="$field.$error.number">should be number</li>
                    <li validation-message ng-if="$field.$error.min">minimum - 5</li>
                    <li validation-message ng-if="$field.$error.max">miximum - 20</li>
                </ul>
            </validation-tooltip>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <input type="number" min="5" max="20" ng-model="number" name="number" class="form-control" required />
        </div>
    </div>
</div>
38
pixelbits

@pixelbitsの答えは素晴らしいです。代わりにこれを使用しました：

  <div class="form-group" ng-class="{ 'has-error': form.name.$dirty && form.name.$invalid }">
    <label for="name" class="col-sm-4 control-label">What's your name?</label>
    <div class="col-sm-6">
      <input class="form-control has-feedback" id="name" name="name" 
        required
        ng-minlength="4"
        ng-model="formData.name"
        tooltip="{{form.name.$valid ? '' : 'How clients see your name.  Min 4 chars.'}}"  tooltip-trigger="focus" 
        tooltip-placement="below">
      <span class="glyphicon glyphicon-ok-sign text-success form-control-feedback" aria-hidden="true"
        ng-show="form.name.$valid"></span>
    </div>
  </div>

テクニックはui-bootstrapのツールチップであり、有効な場合はツールチップテキストを ''に設定します。

http://jsbin.com/ditekuvipa/2/edit

9
Michael Cole

@pixelbitsからのすばらしい回答。私は彼のディレクティブを使用し、一部のユーザーが要求したように、ツールチップが実際の入力の上に表示されるようにわずかに変更しました。

angular.module('app')
    .directive('validationTooltip', ['$timeout', function ($timeout) {

    function toggleTooltip(scope) {
        if (!scope.tooltipInstance) {
            return;
        }

        $timeout(function() {
            if (scope.errorCount > 0 && (scope.showWhen == undefined || scope.showWhen())) {
                scope.tooltipInstance.enable();
                scope.tooltipInstance.show();
            } else {
                scope.tooltipInstance.disable();
                scope.tooltipInstance.hide();
            }
        });
    }

    return {
        restrict: 'E',
        transclude: true,
        require: '^form',
        scope: {
            showWhen: '&',
            placement: '@',
        },
        template: '<div></div>',
        controller: ['$scope', function ($scope) {
            var expressions = [];
            $scope.errorCount = 0;
            this.$addExpression = function (expr) {
                expressions.Push(expr);
            }
            $scope.$watch(function () {
                var count = 0;
                angular.forEach(expressions, function (expr) {
                    if ($scope.$eval(expr)) {
                        ++count;
                    }
                });
                return count;

            }, function (newVal) {
                $scope.errorCount = newVal;

                toggleTooltip($scope);
            });

        }],
        link: function (scope, element, attr, formController, transcludeFn) {
            scope.$form = formController;

            transcludeFn(scope, function (clone) {

                var tooltip = angular.element('<div class="validationMessageTemplate" style="display: none;"/>');
                tooltip.append(clone);
                element.append(tooltip);
                $timeout(function () {
                    scope.$field = formController[attr.target];

                    var targetElm = $('[name=' + attr.target + ']');
                    targetElm.tooltip({
                        placement: scope.placement != null ? scope.placement : 'bottom',
                        html: true,
                        title: clone,
                    });

                    scope.tooltipInstance = targetElm.data('bs.tooltip');
                    toggleTooltip(scope);

                    if (scope.showWhen) {
                        scope.$watch(scope.showWhen, function () {
                            toggleTooltip(scope);
                        });
                    }
                });
            });
        }
    }
}]);

主な変更点は、ディレクティブがjQueryを使用してname属性を介してターゲット要素（入力である必要があります）を見つけ、ディレクティブの要素ではなくその要素のツールチップを初期化することです。また、入力が無効なときに常にツールチップに表示したくない場合があるため、showWhenプロパティをスコープに追加しました（以下の例を参照）。

ValidationMessageディレクティブは変更されていません

angular.module('app').directive('validationMessage', function () {
    return {
        restrict: 'A',
        priority: 1000,
        require: '^validationTooltip',
        link: function (scope, element, attr, ctrl) {
            ctrl.$addExpression(attr.ngIf || true);
        }
    }
});

Htmlでの使用方法も似ていますが、必要に応じてshowWhenを追加するだけです。

<div class="form-group" ng-class="{ 'has-error' : aForm.note.$invalid && (aForm.note.$dirty) }">
    <label class="col-md-3 control-label">Note</label>
    <div class="col-md-15">
        <textarea
            name="note"
            class="form-control"
            data-ng-model="foo.Note"
            ng-required="bar.NoteRequired"></textarea>
        <validation-tooltip target="note" show-when="aForm.note.$invalid && (aForm.note.$dirty)">
            <ul class="validation-list">
                <li validation-message ng-if="$field.$error.required">Note required</li>
            </ul>
        </validation-tooltip>
    </div>
</div>
2
jstromwick

私の目標は、検証フィードバックのためにng-messagesとui-bootstrap popoverの両方を活用することでした。ヘルプブロックのスタイルをより明確に表示するため、ポップオーバーよりもツールチップの方が好きです。

コードは次のとおりです。

<!-- Routing Number -->
<div class="form-group-sm" ng-class="{ 'has-error' : form.routingNumber.$invalid && !form.routingNumber.$pristine }">
    <label class="control-label col-sm-4" for="routing-number">Routing #</label>
    <div class="col-sm-8">
        <input class="form-control input-sm text-box"
            id="routing-number"
            name="routingNumber"
            ng-model="entity.ROUTINGNUM"                        
            popover-class="help-block"
            popover-is-open="form.routingNumber.$invalid"
            popover-trigger="none"
            required
            uib-popover-template="'routing-number-validators'"
            string-to-number
            type="number" />
    </div>                
    <!-- Validators -->
    <script type="text/ng-template" id="routing-number-validators">
        <div ng-messages="form.routingNumber.$error">
            <div ng-messages-include="/app/modules/_core/views/validationMessages.html"></div>
        </div>
    </script>
</div>

これはvalidationMessages.htmlです

<span ng-message="required">Required</span>
<span ng-message="max">Too high</span>
<span ng-message="min">Too low</span>
<span ng-message="minlength">Too short</span>
<span ng-message="maxlength">Too long</span>
<span ng-message="email">Invalid email</span>

注：uib-popover-templateディレクティブを機能させるには、jQuery 2.1.4にアップグレードする必要がありました。

依存関係：

1
Nathan Agersea

実際には、tooltip-enableプロパティを使用するだけです。

<div class="showtooltip" tooltip-placement="left" tooltip-enable="$isValid" tooltip="tooltip message"></div>
1
Greg LBD