angularangular-formly

How to achieve dynamic custom template using ngx-formly

I am using ngx-formly, and try to introduce a custom template, which is for view only. When the template is static, it is ok, but if I try to introduce some angular operation, it doesn't work. See this demo. Any suggestions?

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="submit(model)">
      <formly-form [model]="model" [fields]="fields">
        <button type="submit">Submit</button>
      </formly-form>
    </form>

    {{ model|json }}
  `,
})
export class AppComponent {
  form = new FormGroup({});
  model = {};
  name = "John";
  fields: FormlyFieldConfig[] = [
    {template: `<div>{{name}}</div>`}, // <-- I expected to see John, but I saw {{name}}
    {
      key: 'name',
      type: 'input',
      templateOptions: {
        label: 'Field 1',
        placeholder: 'Formly is terrific!',
      },
    },
  ];

  submit(model) {
    console.log(model);
  }
}
Solution

  • I posted the question into github and got the right answer, please check this for more details.