angularjs - 如何使用 AngularJS UI Bootstrap 工具提示显示表单输入错误？

Question

例如，我的表格是 showing form input errors .

如果有一些错误，我需要在输入标签附近显示红色徽章(带有“悬停显示错误”)。如果用户将鼠标悬停在这个红色徽章上 - 他将看到使用 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 工具提示编写这样的验证工具提示指令？

或者您能否建议另一种方法来维护验证错误消息？

Answer 1

Demo Fiddle

验证工具提示指令

validationTooltip 是主要指令。它具有以下职责:

1. Define the tool tip template through its transcluded contents
2. Keep track of validation expressions so that they can be evaluated with each digest cycle.
3. Expose a controller API for allowing valiationMessage directives to register themselves
4. Provide a 'target' attribute on the directive to specify which form field the badge (and the associated tooltip) will be bound to

附加说明

工具提示模板使用来自链接函数的嵌入函数将模板绑定(bind)到指令的范围。模板可以绑定(bind)到的范围内有两个属性:

1. $form: Bound to the form model defined in parent scope. i.e. $scope.myForm
2. $field: Bound to the form.name model in parent scope. i.e. $scope.myForm.myInput

这允许模板绑定(bind)到验证属性，例如 $valid、$invalid、$pristine、$dirty 和 $error，而无需直接引用表单名称或输入字段的名称。例如，以下所有表达式都是有效的绑定(bind)表达式:

$form 属性:

`$form.$valid`

`$form.$invalid`

`$form.$dirty`

`$form.$pristine`

`$form.$error.required` 等等...

$字段属性:

`$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. Add a form with a name attribute
2. Add one or more form fields - each with a name attribute and an ng-model directive.
3. Declare a <validation-tooltip> element with a target attribute referring to the name of one of the form fields.
4. Apply the validation-message directive to each message with an optional ng-if binding expression.

<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>