Skip to content
Advertisement

Angular MatStepper fails to recognize cached values from two str arrays (but successfully recognizes values from another str array)

I have a MatStepper that’s used to navigate to the next page of a signup flow. I also have a method that loads values from a cache if it’s available, and if so then the MatStepper skips to Page 2. After that, a future method pre-fills the form will those cached values.

The scenario where cachedSports are retrieved causes the MatStepper to work and skip to Page 2, but when I try to pre-fill with cachedPets or cachedAnimals the MatStepper fails and gives me the following error:

Cannot read properties of undefined (reading 'next')

There aren’t a lot of differences between cachedSports and the two failing scenarios, so I don’t know what the culprit is. All three are arrays of strings and the values from their caches are coming in successfully.


JavaScript

This is where the cached values are actually added into the form

JavaScript

Verbose err message:

JavaScript

Advertisement

Answer

It’s the ViewChild not being defined/set when goForward is called.

If the template is being updated then it’s probably a timing issue. For testing purposes you can wrap the code in goForward in a setTimeout()

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement