Ngx-formly: error when use custom wrapper component with fieldGroup what am i doing wrong?

[EliasDerHai]

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

Current behavior

FormlyForm.html:2 ERROR TypeError: Cannot read property 'insert' of undefined
at FormlyField.renderField (ngx-formly-core.js:1024)
at FormlyField.ngOnChanges (ngx-formly-core.js:995)
at checkAndUpdateDirectiveInline (core.js:24499)
at checkAndUpdateNodeInline (core.js:35163)
at checkAndUpdateNode (core.js:35102)
at debugCheckAndUpdateNode (core.js:36124)
at debugCheckDirectivesFn (core.js:36067)
at Object.eval [as updateDirectives] (FormlyForm.html:2)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:36055)
at checkAndUpdateView (core.js:35067)

when try to use custom wrapper for fieldGroup.
without fieldgroup it works . but in example it works with this setup

Expected behavior

should work like in stackblitz example

Minimal reproduction of the problem with instructions

copied panel-wrapper example from here
https://stackblitz.com/angular/omeknmmqjmd?file=src%2Fapp%2Fpanel-wrapper.component.ts
like this

````
import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';

@Component({
selector: 'app-panel-wrapper',
template: <div class="card"> <h3 class="card-header">{{ to.label }}</h3> <div class="card-body"> <ng-container #fieldComponent></ng-container> </div> </div> ,
})
export class PanelWrapperComponent extends FieldWrapper {
@ViewChild('fieldComponent', { static: false }) fieldComponent: ViewContainerRef;
}
````

my component:

````
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';

@Component({
selector: 'app-formly',
templateUrl: './formly.component.html',
styleUrls: ['./formly.component.css']
})
export class FormlyComponent {

form = new FormGroup({});

model: any = {
}

options: FormlyFormOptions = {};

fields: FormlyFieldConfig[] = [
{
key: 'switchDetail',
wrappers: ['panel'],
templateOptions: {
label: 'Switch Detail',
},
hideExpression: (model) => this.model.cla != 2,
fieldGroup: [{
key: 'hasfeedback',
type: 'checkbox',
templateOptions: {
label: 'Feedback for Switch'
}
}]
}
];

submit() {
if (this.form.valid) {
alert(JSON.stringify(this.model));
}
}
}

````

and app.module:

````
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormlyMaterialModule } from '@ngx-formly/material';

import { AppComponent } from './app.component';
import { JsonSchemaFormComponent } from './json-schema-form/json-schema-form.component';
import { FormlyComponent } from './formly/formly.component';
import { PanelWrapperComponent } from './formly/panel-wrapper.component';

@NgModule({
declarations: [
AppComponent,
JsonSchemaFormComponent,
PanelWrapperComponent,
FormlyComponent
],
imports: [
BrowserModule,
CommonModule,
ReactiveFormsModule,
BrowserAnimationsModule,
FormlyModule.forRoot({
validationMessages: [
{ name: 'required', message: 'This field is required' },
],
wrappers: [
{ name: 'panel', component: PanelWrapperComponent },
],
}),
FormlyMaterialModule,
],

providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 8.01
  

• Browser: [all | Chrome Version 75.0.3770.100 (Offizieller Build) (64-Bit)

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[davidhenley]

You need to add static: true to your ViewChild decorator
@ViewChild('fieldComponent', {read: ViewContainerRef, static: true}) fieldComponent: ViewContainerRef;

[AlluNandaKishore]

I'm still facing the same issue after adding the static flag with ngx-formly.
Can anyone tell me what could be the issue.

[aitboudad]

@AlluNandaKishore the property should be named to fieldComponent.

@ViewChild('fieldComponent', { read: ViewContainerRef, static: true }) fieldComponent: ViewContainerRef;

if you're using the latest version (v5.4), you can skip defining fieldComponent property:

@Component({ ... })
export class CustomWrapper extends FieldWrapper {
-   @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent: ViewContainerRef;
}