Ngx-formly: Angular interpolation in JSON powered forms

Created on 20 Aug 2018  路  3Comments  路  Source: ngx-formly/ngx-formly

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[X] support request

I'm looking for a way to display a model value as HTML (via JSON file):

    {
      "template": "<h1>Name: {{model.name}}</h1>",
      "hideExpression": "!model.name",
    }

Current behavior
Name: {{model.name}}

Expected behavior
Name: John

Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/ngx-formly-ui-material-s6wh1o?file=app/app.component.ts

question

All 3 comments

not supported since angular doesn't allow it as it require to include angular compiler, an alternative solution is to use expressionProperties instead:

    {
      "hideExpression": "!model.name",
      expressionProperties: {
        'template': '"<h1>Name: " + model.name + "</h1>"'
      }
    }

@aitboudad, is there a way I can use in-line styles? E.g.

    {
      "expressionProperties": {
        "template": "'<h1 style=\"color: red\">Name: ' + model.name + '</h1>'",
      },
      "hideExpression": "!model.name",
    }

create a custom formly type and call bypassSecurityTrustHtml see the following example: https://stackblitz.com/edit/angular-jbrdls

Was this page helpful?
0 / 5 - 0 ratings