[BUG] NextPages for wizard not rendered

[osvaldo-santos]

Environment

When rendering wizard in browser console appear next error:

ERROR TypeError: Cannot read property 'options' of undefined
at MaterialWizardComponent.ngOnInit (angular-material-formio.js:237)
at checkAndUpdateDirectiveInline (core.js:31910)
at checkAndUpdateNodeInline (core.js:44367)
at checkAndUpdateNode (core.js:44306)
at debugCheckAndUpdateNode (core.js:45328)
at debugCheckDirectivesFn (core.js:45271)
at Object.eval [as updateDirectives] (MaterialWizardComponent_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44637)

When press Next Button wizard not render next page but event is fired, even if press next button until end, submit button is showed.

• Hosting type
  • [] Form.io
  • [x ] Local deployment
    • Version:
• Formio.js version:
• Frontend framework: Angular
• Browser: Firefox
• Browser version:

Steps to Reproduce

1. Download angular-material-formio demo
2. Change in app.component.html mat-formio src to ""https://pbojhsynrxckvwh.form.io/test-resource"
3. Run ng serve

Expected behavior

Wizard should render next pages

Observed behavior

Next pages not rendered

[wag110894]

Hello @osantos1910, Thank you for providing the form embed URL. We are not seeing this issue on our side using Formio.js versions 4.9.20 as well as version 4.10.0-rc.3. Could you provide a JSFiddle of this issue so we can replicate on our side?

[osvaldo-santos]

Hello @osantos1910, Thank you for providing the form embed URL. We are not seeing this issue on our side using Formio.js versions 4.9.20 as well as version 4.10.0-rc.3. Could you provide a JSFiddle of this issue so we can replicate on our side?

Hello @wag110894 . Thanks for your answer. I'm still getting the issue. As explain above I use angular-material-formio not only Formio.js. When I use angular-formio all works fine and I getting the expected behavior, but all stop working when instead use formio I use mat-formio tag.

This is my app.component.html

<mat-formio src="https://pbojhsynrxckvwh.form.io/test-resource" (submit)="onSubmit($event)">

This are the dependencies of my package.json
{
"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.2.3",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/elements": "^8.2.14",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "^8.2.14",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "^8.2.14",
"angular-material-formio": "^1.26.0",
"formiojs": "^4.10.0-rc.4",
"hammerjs": "^2.0.8",
"rxjs": "^6.5.5",
"tslib": "^1.11.2",
"zone.js": "^0.10.3"
}

[osvaldo-santos]

I think the issue is related to method setPage of Formio.js. Here this.redraw() is treated as a Promise and instead in angular-material-formio library redraw() method not have return statement returning undefined and not a promise.

this.redraw().then(function () { if (!_this11.options.readOnly) { _this11.checkValidity(_this11.submission.data, false, _this11.submission.data, true); } });

I review method nextPage() on formio.wizard.ts of angular-material-formio library, this method call nextPage of the instance in this case Wizard from Formio.js and that trigger redraw method of the instance.

nextPage() { this.instance.nextPage().then(() => this.stepper.next()); }

Adding a catch to this method I get the following error: TypeError: Cannot read property 'then' of undefined

[wag110894]

@osantos1910, Thank you for providing this additional information. We have assigned this item to a developer to take a look at. We will let you know once this issue is resolved.

[osvaldo-santos]

@wag110894 Thank you for all

[anojphilip007]

is it resolved? I am still getting the issue

[wag110894]

Is this still an issue on the latest version of angular material?