Formly bootstrap. How do I show label with html? - angular-ui-bootstrap

Question

I am using angularjs formly. Bootstrap template. I am looking a way to show html code I label. Now they are escaped when display
Here is the formly fields
vm.fields = [
{
key: 'awesome',
type: 'checkbox',
templateOptions: { label: 'this is a test' }
},
{
key: 'exampleDirective',
template: '<div example-directive></div>',
templateOptions: {
label: 'Example Directive',
}
}
];
I expected the A tag in "this is a test" can render properly.

Answer 1

In my case in with a textarea but i hope this help you to made a similar formly type with checkbox that can use html in label
I create a new type caled textareaHtml, it just extend 'textarea' and use this wrapper 'labelHtml' that load html with
'<span ng-bind-html="to.label" ></span>',
here the code
app.run(function(formlyConfig ) {
formlyConfig.setWrapper(
{
name: 'labelHtml',
template: [
'<div>',
'<label for="{{id}}" class="control-label {{to.labelSrOnly ? \'sr-only\' : \'\'}}" ng-if="to.label">',
'<span ng-bind-html="to.label" ></span>',
'{{to.required ? \'*\' : \'\'}}',
'</label>',
'<formly-transclude></formly-transclude>',
'</div>'
].join(' ')
}
);
formlyConfig.setType({
name: 'textareaHtml',
extends: 'textarea',
wrapper: ['labelHtml', 'bootstrapHasError']
});
});

Answer 2

I fixed the #imaginabit answer:
<script type="text/ng-template" id="checkboximp.html">
<div class="checkbox">
<label>
<input type="checkbox"
class="formly-field-checkbox"
ng-model="model[options.key]">
{{to.required ? '*' : ''}}
<div ng-bind-html="to.label"> </div>
</label>
</div>
</script>
/* global angular */
(function() {
'use strict';
var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'ngSanitize'], function config(formlyConfigProvider) {
// set templates here
formlyConfigProvider.setType({
name: 'checkboxHtml',
extends: 'checkbox',
templateUrl: 'checkboximp.html',
wrapper: ['bootstrapHasError']
});
});
app.controller('MainCtrl', function MainCtrl(formlyVersion) {
var vm = this;
// funcation assignment
vm.onSubmit = onSubmit;
// variable assignment
vm.author = { // optionally fill in your info below :-)
name: 'Kent C. Dodds',
url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
};
vm.exampleTitle = 'Introduction';
vm.env = {
angularVersion: angular.version.full,
formlyVersion: formlyVersion
};
vm.model = {
awesome: true
};
vm.options = {
formState: {
awesomeIsForced: false
}
};
vm.fields = [
{
key: 'awesome',
type: 'checkbox',
templateOptions: { label: 'this is a test' }
},
{
key: 'awesome2',
type: 'checkboxHtml',
templateOptions: { label: 'this is a from j. lennon' }
}
];
// function definition
function onSubmit() {
alert(JSON.stringify(vm.model), null, 2);
}
});
})();
http://jsbin.com/dunuyakiwe/2/edit?html,js,output
Just two observations:
It's necessary to have angular sanitize library, and that would make the template work fine (ng-bind-html directive).
The default checkbox formly template has an embedded label in the component, so is not possible to use that out of the box, that's why it's simpler to create our own type.