Question

你好
我想以正式的角度自定义标签。

我知道您可以在label对象中设置templateOptions属性，如下所示：

type: 'input',
key: 'firstName',
templateOptions: {
    type: 'text',
    label: 'Name',
    required: true
}

但是我需要在标签中插入HTML，诸如此类（带有引导工具提示的示例）：

type: 'input',
key: 'firstName',
templateOptions: {
    type: 'text',
    label: 'Name <i tooltip title="Insert your First Name">?</i>',
    required: true
}

我也搜索过文档，但是没有找到对我有帮助或说明得很好的内容
我该怎么办？

Answer 1

可能有点晚了，但我有同样的需求。这是我经过一些搜索后的处理方式：

/* global angular */
(function() {
  'use strict';

  var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'ngSanitize'], function config(formlyConfigProvider) {
    // set templates here
   formlyConfigProvider.setType({
    name: 'inputLabelHtml',
    extends: 'input',
    templateUrl: 'input-label.html',
    wrapper: ['bootstrapHasError']
   });
    
  });
  

  app.controller('MainCtrl', function MainCtrl(formlyVersion) {
    var vm = this;
   
    
    vm.fields = [
    
      {
        key: 'awesomeName',
        type: 'inputLabelHtml',
        templateOptions: { label: 'Name <i tooltip title="Insert your First Name">?</i>' }
      }     
 
    ];

  });

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <!-- Twitter bootstrap -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

    <!-- apiCheck is used by formly to validate its api -->
    <script src="//npmcdn.com/api-check@latest/dist/api-check.js"></script>
  
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.7/angular-sanitize.js"></script>

    <!-- This is the current state of master for formly core. -->
    <script src="//npmcdn.com/angular-formly@latest/dist/formly.js"></script>
    <!-- This is the current state of master for the bootstrap templates -->
    <script src="//npmcdn.com/angular-formly-templates-bootstrap@latest/dist/angular-formly-templates-bootstrap.js"></script>

    <title>Angular Formly HTML in Label example</title>
  </head>

  <body ng-app="formlyExample" ng-controller="MainCtrl as vm">
    <div>
     
      <form ng-submit="vm.onSubmit()" name="vm.form" novalidate>
        <formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form">
        
        </formly-form>
      </form>
     
    </div>

  
    <!--custom templates -->
    
    <script type="text/ng-template" id="input-label.html">
     <div class="text">
          <label>
           <div  ng-bind-html="to.label"> </div>
            </label>
            <input type="input"
                   class="formly-field-input"
                   ng-model="model[options.key]">           
            {{to.required ? '*' : ''}}
         
        </div>     
    </script>
    
  </body>

</html>

自定义标签角度正式

1 个答案: