[BUG] conditional in wizard page produces "this.parent.viewContainer is not a function"

[agoetschm]

Environment

• Hosting type
  • [x] Local deployment
  • Version: 1.30.0
  • [ ] Form.io
• Formio.js version: 4.10.3-rc.3
• Frontend framework: angular 8.2.14
• Browser: occurs with both Chrome and Firefox

Steps to Reproduce

1. clone the angular-material-formio demo
2. replace the content of app.component.html with

   <mat-formio [form]="form" [submission]="submission" (submit)="onSubmit($event)"></mat-formio>

3. edit the app.component.ts file to contain

   form: any = {
   "type": "form",
   "components": [
   {
     "key": "panel",
     "title": "Part 1",
     "components": [
       {
         "label": "Foo",
         "key": "foo",
         "type": "textfield",
       }
     ],
     "type": "panel",
   },
   {
     "key": "panel2",
     "title": "Part 2",
     "components": [
       {
         "label": "Bar",
         "key": "bar",
         "type": "textfield",
       }
     ],
     "type": "panel",
     "customConditional": "show = (data.foo >= 5);"
   }
   ],
   "display": "wizard",
   "title": "Test wizard",
   };
   submission: any = {
   "data": {
   "foo": 5
   }
   };

Expected behavior

The second page of the multi-step form should only be visible when foo is greater or equal to 5 in the first page.

Observed behavior

When foo < 5 there is no error. When foo >= 5, the following error occurs

core.js:6014 ERROR TypeError: this.parent.viewContainer is not a function
    at TextFieldComponent.render (angular-material-formio.js:3456)
    at NestedComponent.js:453
    at Array.map (<anonymous>)
    at Wizard.renderComponents (NestedComponent.js:452)
    at MaterialWizardComponent.renderComponents (angular-material-formio.js:3158)
    at MaterialWizardComponent.render (angular-material-formio.js:1316)
    at angular-material-formio.js:1326
    at SafeSubscriber.schedulerFn [as _next] (core.js:35379)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)

I tried to display the same form in a project based on the angular-formio demo app https://github.com/formio/angular-demo and it works well, so I suppose that the issue is somewhere in this repo.

[travist]

We will investigate this. Thanks.

[jeriah-formio]

@agoetschm Shoud be resolved with the latest version of formio.js and Angular Material

[agoetschm]

@jhen1422 thanks for working on this! I just tested using my dummy wizard and the panel with the conditional appears depending on the value in the foo text field as expected, but the error still occurs and the content of the second panel (the bar text field) does not appear. Anything I can do on my side?

[wag110894]

Hello @agoetschm,

Can you provide your from as well as a video of the issue?