template is sanitized by Angular

[its-dibo]

{
      key: "test",
      template: `test: <input>`,
      templateOptions: {
        label: "test"
      }
    }

WARNING: sanitizing HTML stripped some content, see http://g.co/ng/security#xss

this causes that not being rendered.

[aitboudad]

use sanitizer service:

import { DomSanitizer } from '@angular/platform-browser';
...

fields: = [{
  key: "test",
  template: this.sanitizer.bypassSecurityTrustHtml(`test: <input>`),
  templateOptions: {
    label: "test"
  }
}];

constructor(private sanitizer: DomSanitizer) {}

[its-dibo]

I know about sanitizer service, but I mean that formly should do bypassSecurityTrustHtml() for template value by default

[aitboudad]

ok, I'll mark this as a feature, adding an extra option to mark it safe but not by default:

fields: = [{
  key: "test",
  template: `test: <input>`,
  templateOptions: {
+    safeHtml: true
  }
}];

[its-dibo]

I'm voting up for this feature, but what is the problem with making it safe by default, the template value is not dynamically created *i.e via an API call).

just to know your opinion.

[aitboudad]

with the problem with making it safe by default?

1. Breaking change
2. Consistency with angular HTML binding behavior
3. Devs should be aware of enabling this feature (in case the template is controlled by end-users/dynamically created).

[its-dibo]

use sanitizer service:

import { DomSanitizer } from '@angular/platform-browser';
...

fields: = [{
  key: "test",
  template: this.sanitizer.bypassSecurityTrustHtml(`test: <input>`),
  templateOptions: {
    label: "test"
  }
}];

constructor(private sanitizer: DomSanitizer) {}

keep in mined that this method will cause error TS2322: Type 'SafeHtml' is not assignable to type 'string'.

we may use

  template: this.sanitizer.bypassSecurityTrustHtml(`test: <input>`)[
            "changingThisBreaksApplicationSecurity"
          ]

which is not recommended

[aitboudad]

This issue has been fixed and released as part of v5.6.0 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!

[its-dibo]

wow, great news. ❤
I will give a try and give you a feedback.

[its-dibo]

did'nt work
https://stackblitz.com/edit/formly-dynamic-checkboxes?file=src%2Fapp%2Fapp.component.ts

also please check this issue

I updated formly to the latest version.

[aitboudad]

  fields: [{
    key:"categories",
    template:'<input type="checkbox" name="test" value="ok"/> test<br />',
-    safeHtml: true
+    templateOptions: {
+      safeHtml: true
+    }
  }],