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

Question

例如,我有表单,我显示表单输入错误.

如果有错误,我需要在输入标签附近显示红色徽章(带有"悬停以显示错误").如果用户将悬停此红色徽章 - 他将使用AngularJS UI Bootstrap工具提示查看错误列表.我不想将错误列表放入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工具提示编写这样的validation-tooltip指令？

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

Answer 1

演示小提琴

验证工具提示指令

validationTooltip是主要指令.它有以下责任:

1. 通过其转换内容定义工具提示模板
2. 跟踪验证表达式,以便可以使用每个摘要周期对它们进行评估.
3. 公开控制器API以允许valiationMessage指令自行注册
4. 在指令上提供"target"属性,以指定徽章(和相关工具提示)将绑定到哪个表单字段

补充说明

工具提示模板使用link函数中的transclusion函数将模板绑定到指令的作用域.模板可以绑定到范围内的两个属性:

1. $ form:绑定到父作用域中定义的表单模型.即$ scope.myForm
2. $ field:绑定到父作用域中的form.name模型.即$ scope.myForm.myInput

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

$ form属性:

• `$形式.$ valid`
• `$形式.$ invalid`
• `$形式.$ dirty`
• `$形式.$ pristine`
• `$ form.$ error.required`等......

$ field属性:

• `$域.$ valid`
• `$域.$ invalid`
• `$域.$ dirty`
• `$域.$ 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. 添加具有name属性的表单
2. 添加一个或多个表单域 - 每个域都带有name属性和ng-model指令.
3. 声明一个<validation-tooltip>元素,该元素target引用一个表单字段的名称.
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>

Answer 2

@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