In my application, there is a MatStepper component that facilitates navigation through the signup flow. A method exists to load cached values when available, causing the MatStepper to skip to Page 2. Subsequently, another method pre-fills the form with these cached values.
The issue arises when attempting to pre-fill the form with either cachedPets or cachedAnimals, resulting in an error on the MatStepper:
Cannot read properties of undefined (reading 'next')Despite similarities between cachedSports and the failing scenarios, all being arrays of strings with successful cache retrieval, I am unable to identify the cause of the problem.
// Code snippet for loading cached values from memory-cache.service.ts
loadFromCache(): void {
const cachedPets: string[] = this.cacheService.get<string[]>(MemoryCacheService.WellKnownKeys.pets) ?? [];
const cachedSports: string[] = this.cacheService.get<string[]>(MemoryCacheService.WellKnownKeys.sports) ?? [];
const cachedAnimalNames: string[] = this.cacheService.get<string[]>(MemoryCacheService.WellKnownKeys.animals) ?? [];
if (cachedPets.length > 0) {
// Logic to set targeting form group based on cached values
} else if (cachedSports.length > 0) {
// Logic to set targeting form group based on cached values
} else if (cachedAnimalNames.length > 0) {
// Logic to set targeting form group based on cached values
}
console.log('cachedPets: ', cachedPets);
console.log('cachedSports: ', cachedSports);
console.log('cachedAnimalNames: ', cachedAnimalNames);
this.goForward(); // This triggers the 'next' action on MatStepper
// More logic here to handle cache removal and other actions
}
goForward(){
this.myStepper.next();
}
This section handles the validation of targetting form
// Code for validating targeting form within the same file
validateFormTargeting() {
// Some logic to validate form values
}
Error message details:
TypeError: Cannot read properties of undefined (reading 'next')
at AppModalFormCreateComponent.goForward (myForm.component.ts:371:20)
at AppModalFormCreateComponent.loadFromCache (myForm.component.ts:357:10)
at AppModalFormCreateComponent.ngOnInit (myForm.component.ts:227:10)