Question

我目前正在使用角度形式来生成我的表单...它工作得很好但现在我遇到了一个问题，我无法提供表单的工具提示。

当用户将输入悬停在输入或旁边时，我想要工具提示....

我做了一个指令，允许我将工具提示添加到各个字段。

formly：

var background: UIColor? {
  guard let theme = self.theme else { return nil }
  switch theme {
    case "Red": return UIColor(named: "darkRed")
    case "Blue": return UIColor(named: "darkBlue")
    default: return nil
  }
}

我希望在字段旁边添加

tooltip指令：

        {
          className: "row",
          fieldGroup: [
            {
              fieldGroup: [
                {
                  key: 'page',
                  type: 'horizontalInputFees',
                  name: 'Number of Pages',
                  templateOptions: {
                    label: '# of pages',
                    type: 'number',
                    max: 100,
                    min: 0,
                    maxlength: 3,
                    onFocus: hideFieldErrors,
                    onBlur: showFieldErrors
                  },
                  validation: addValidation()
                }
              ]
            }
          ]
        }

我想我的问题是....有什么方法可以在特定的形式字段/输入旁边添加html吗？

Answer 1

您不需要制作指令，您可以简单地包装标签或bootstrapLabel模板：

app.config(function (formlyConfigProvider) {
        formlyConfigProvider.setWrapper([{name: 'bootstrapLabel',
            overwriteOk: true,
            template: '<div>' +
                       '<style> .tooltip-inner {max-width: 375px;}</style>' +    
                       '<label for="{{id}}" class="control-label {{to.labelSrOnly ? \'sr-only\' : \'\'}}" ng-if="to.label">' +
                       '{{to.label}}' +
                       '{{to.required ? \'*\' : \'\'}}' +
                       '</label><i style="margin-left: 5px;" ng-if="to.tooltip" class="control-label-help glyphicon glyphicon-question-sign" uib-tooltip-html="to.tooltip.content" tooltip-is-open="false" tooltip-trigger="mouseenter"></i>' +
                       '<formly-transclude></formly-transclude>'+
                       '</div>'
        }]);

然后你会像这样使用它：

    templateOptions: {
      label: 'Test',
       options: [{ value: 'testID', name: 'Test ID' }, { value: 'Test ID', name: 'Test2 ID' }],
       tooltip: {
       content: $sce.trustAsHtml('Test this out <br\> You can write HTML in here <br\> <b>Bold</b> <i>italics</i> <ul><li>part of a list</li></ul> <br\> ')}
}

这将显示标签旁边的UI-Bootstrap工具提示，当您将其鼠标悬停时，该标签会打开。您可以在templateOptions中的工具提示内容中编写HTML，并且可以正确地格式化它。

添加工具提示/链接到角形式字段

1 个答案: