Any idea/ETA when templateRef will be implemented?

[renatoaraujoc]

Hello,

Wondering when this solution will get implemented #2086 (comment)?

I need to mix the form with angular components and do actions accordingly...

Thanks!

[aitboudad]

still not having the time 🙏, it can be achieved somehow using a custom field type with a CDK portal or just NgTemplateOutlet https://stackblitz.com/edit/angular-fvfcth

[rocktheroad]

Thanks, @aitboudad ! This works perfectly until you need to pass template reference to a field in a repeating section. Here is a forked repeating section example: https://stackblitz.com/edit/angular-xoamrw-zvjxrm

I have defined sample template in app.html:
<ng-template #formlyTemplate> Template content! </ng-template>

Passed template to field configuration:

      {
        key: 'investments',
        type: 'repeat',
        templateOptions: {
          template: this.formlyTemplate,
          addText: 'Add another investment',
        },

Added template to repeat section button:

      <button class="btn btn-primary" type="button" (click)="add()">{{ to.addText }}
      <ng-container [ngTemplateOutlet]="to.template"></ng-container>
      </button>

and it works like a charm!

But when I try to pass the template to the field in FieldArray, it fails:

        fieldArray: {
          fieldGroup: [
            {
              className: 'col-sm-4',
              type: 'input',
              key: 'investmentName',
              templateOptions: {
                template: this.formlyTemplate,
                label: 'Name of Investment:',
                required: true,
              },
            },

Any idea what I am missing?

What I am actually trying to do is to pass TemplateRef to Autocomplete, to avoid creating multiple autocomplete types in order to render options differently. But autocomplete field is in FieldArray :(

[kenisteward]

@rocktheroad

on the formArray field could you please try doing this,

              expressionProperties: {
                "templateOptions.template": "formState.template"
              }

on formstate before that do this

    this.options = {
      ...this.options,
      formState: {
        template: this.formlyTemplate
      }
    }

I'm not getting an error that way but because there is no autocomplete in the example to be used i'm not sure if it works or not.

@aitboudad it looks like there may be a bug when using the utils.clone function on cloning the formlyFields for the form array to use. It is unable to clone the TemplateRef I believe. it is currently erroring out saying "cannot read 'name' of undefined" but i'm not sure where name is coming from.

[rocktheroad]

@kenisteward, that works. Actually, it is pretty close to what I had as a workaround. In autocomplete-type.component.ts I was checking first for the existence of template in templateOptions first, then in formState, and as a last resort I was providing default template.

The problem is when I have several different autocomplete types with different templates on the same form. Storing a template in formState limits you to one template, as it is shared between all fields.

[kenisteward]

@kenisteward, that works. Actually, it is pretty close to what I had as a workaround. In autocomplete-type.component.ts I was checking first for the existence of template in templateOptions first, then in formState, and as a last resort I was providing default template.

The problem is when I have several different autocomplete types with different templates on the same form. Storing a template in formState limits you to one template, as it is shared between all fields.

Isn't each autocomplete a different key? In the sense couldn't you just use a different key on formstate for each autocomplete ?

Or use an object to store all your templates and put each key in there. I might be mis understanding your scenario so let me know!

[aitboudad]

@aitboudad it looks like there may be a bug when using the utils.clone function on cloning the formlyFields for the form array to use. It is unable to clone the TemplateRef I believe. it is currently erroring out saying "cannot read 'name' of undefined" but i'm not sure where name is coming from.

fixed, will be part of next release.

Any idea/ETA when templateRef will be implemented?

the new solution is available in https://github.com/ngx-formly/ngx-formly/releases/tag/v6.0.0-next.4, for usage check my comment #2086 (comment)