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

例如，我有我所在的表格

如果有一些错误，我需要在输入标签附近显示红色徽章（带有“悬停以显示错误”）。如果用户将此红色徽章悬停-他将使用查看错误列表。 我不想将错误列表放入工具提示html不安全属性中，因为它不便于编辑和维护

此代码更具声明性：

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

此字段为必填字段
应该是数字
最小值为-5
miximum-20

除此代码外：

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

悬停以显示错误

如何使用AngularJS UI引导工具提示编写此类验证工具提示指令？

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

验证工具提示指令

validationTooltip是主指令。其职责如下：

通过其转置内容定义工具提示模板

跟踪验证表达式，以便在每个摘要周期中对其求值

公开允许valiationMessage指令注册自身的控制器API

在指令上提供一个“target”属性，以指定徽章（以及相关工具提示）将绑定到哪个表单字段

附加注释

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

$form：绑定到父范围中定义的表单模型。i、 e.$scope.myForm

$field：绑定到父范围中的form.name模型。i、 e.$scope.myForm.myInput

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

$form属性：

• `$form.$valid`
• `$form.$invalid`
• `$form.$dirty`
• `$form.$pristine`
• `$form.$error.required`etc

$field属性：

• `$field.$valid`
• `$field.$invalid`
• `$field.$dirty`
• `$field.$pristine`
• `$field.$error.必填`etc

指令执行

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
                    });

                });
            });
        }
    }
});

在HTML中的用法

添加具有名称属性的表单

添加一个或多个表单字段-每个字段都有一个name属性和一个ng model指令

声明一个

元素，该元素具有一个

target

属性，该属性引用其中一个表单字段的名称

使用可选的

ng if

绑定表达式将

验证消息

指令应用于每条消息

数

此字段为必填字段
应为数字
最小值-5
miximum-20

@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引导的工具提示，并在有效时将工具提示文本设置为“”

---

来自@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);
                        });
                    }
                });
            });
        }
    }
}]);

Html中的用法也类似，只要添加

showhen

（如果需要）：

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

注

需要注意

您实际上可以使用工具提示启用属性：

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

---

我的目标是利用ng消息和ui引导popover进行验证反馈。我更喜欢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>

必需
太高
太低
太短
太久
无效电子邮件

注意：我必须升级到jQuery2.1.4才能让uib popover模板指令正常工作

依赖项：

---

您可以使用此验证库并创建自定义元素修饰符，以在组件无效时设置工具提示您也可以将xtForm用作准备使用的指令我尝试使用您的指令，但它返回给我：找不到指令“validationTooltip”所需的控制器“表单”！可能是什么？检查HTML格式是否正确，是否缺少任何结束标记。validationTooltip和validationMessage指令必须在以前的标记中，如果我们想将错误工具提示显示到输入字段而不是标签，如何？有可能吗？如果您想显示HTML列表，显示输入的错误，例如密码的安全标准，这会很快变得复杂。这很好，但它只会在焦点上显示工具提示，因此，例如，如果您有5个字母，但删除了2个，则不会

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

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

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