Dealing with Angular Material Stepper and utilizing Separate Components for individual steps, encountering the error of ExpressionChangedAfterItHasBeenChecked

Question

Dealing with Angular Material Stepper and utilizing Separate Components for individual steps, encountering the error of ExpressionChangedAfterItHasBeenChecked

I am currently working with a material stepper that contains forms within each step. I am facing an issue where each step should be controlled by the form associated with it.

Although similar questions have been asked on SO, the answers provided did not resolve my specific problem. Therefore, I am reaching out for assistance.

Parent HTML

<mat-horizontal-stepper linear #stepper>
    <mat-step [stepControl]="frmStepOne">
        <ng-template matStepLabel>Step One Details</ng-template>
        <app-first-step #stepOne></app-first-step>
    </mat-step>
    <mat-step [stepControl]="frmStepTwo">
        <ng-template matStepLabel>Step Two Details</ng-template>
        <app-second-step #stepTwo></app-second-step>
    </mat-step>
</mat-horizontal-stepper>

Within my parent component, I have the following setup.

@ViewChild('stepOne') stepOneComponent: FirstStepComponent;
@ViewChild('stepTwo') stepTwoComponent: SecondStepComponent;


get frmStepOne() {
    return this.stepOneComponent ? this.stepOneComponent.frmStepOne : null;
}

get frmStepTwo() {
    return this.stepTwoComponent ? this.stepTwoComponent.frmStepTwo : null;
}

Child Class Component

frmStepOne: FormGroup;

constructor(private formBuilder: FormBuilder) {

    this.frmStepOne = this.formBuilder.group({
      name: ['', Validators.required]
    });
}

Child Class HTML

<mat-card>

  <form [formGroup]="frmStepOne">

    <mat-form-field>
      <input matInput formControlName="name" matInput placeholder="Name" required>
    </mat-form-field>

    <mat-card-actions>
      <button mat-raised-button matStepperNext class="nav-btn pull-right">Next</button>
    </mat-card-actions>

  </form>

</mat-card>

Upon running the app, the console displays the following error message.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'stepControl: null'. Current value: 'stepControl: [object Object]'.

While suggestions from similar discussions on Stack Overflow advise moving form initialization to the constructor instead of ngOnInit, I have already made this adjustment but the error persists.

Angular Material Stepper Component For Each Step

If anyone has insights on resolving this issue, please share your recommendations.

Thank you.

angular typescript angular-material angular9 angular-material-stepper

Answer 1

Answer №1

Essentially, Angular detects the change after already setting the value as null for both values. To address this, you must explicitly instruct Angular to run change detection. Take a look at this demo code for reference.

I have eliminated the use of get logic because directly calling a function from HTML is considered bad practice and can lead to multiple function calls. You can try adding console logs in your code to see this in action.

To resolve this issue, I have implemented ngAfterViewInit along with ChangeDetectorRef.

export class AppComponent implements AfterViewInit {
  title = 'mat-stepper';

  form1: FormGroup;
  form2: FormGroup;
  @ViewChild('stepOne') stepOneComponent: FirstStepComponent;
  @ViewChild('stepTwo') stepTwoComponent: SecondStepComponent;

  constructor(private cdr :ChangeDetectorRef){}

  ngAfterViewInit(){
    this.form1 = this.stepOneComponent.frmStepOne;
    this.form2 = this.stepTwoComponent.frmStepTwo
    this.cdr.detectChanges();
  }

}

Following these steps will effectively solve the error

Answer 2

Essentially, Angular detects the change after already setting the value as null for both values. To address this, you must explicitly instruct Angular to run change detection. Take a look at this demo code for reference.

I have eliminated the use of get logic because directly calling a function from HTML is considered bad practice and can lead to multiple function calls. You can try adding console logs in your code to see this in action.

To resolve this issue, I have implemented ngAfterViewInit along with ChangeDetectorRef.

export class AppComponent implements AfterViewInit {
  title = 'mat-stepper';

  form1: FormGroup;
  form2: FormGroup;
  @ViewChild('stepOne') stepOneComponent: FirstStepComponent;
  @ViewChild('stepTwo') stepTwoComponent: SecondStepComponent;

  constructor(private cdr :ChangeDetectorRef){}

  ngAfterViewInit(){
    this.form1 = this.stepOneComponent.frmStepOne;
    this.form2 = this.stepTwoComponent.frmStepTwo
    this.cdr.detectChanges();
  }

}

Following these steps will effectively solve the error

Answer 3

Answer №2

If you encounter an error, consider changing the troublesome variable to an Observable and applying the pipe with the delay(0) operator

Check out this link for a functional solution that eliminates errors without the need for change detection.

Here's an example:

Imagine using a variable named name of type string in your html template causing the aforementioned error.

<div>{{ name }}</div> // Error occurs here

This error can happen when Angular checks a value that changed after the initial check.

To resolve this, convert name into an Observable like name$

name$: Observable<string>; 

private myName$ = new BehaviorSubject<string>("");
myNameListener$: Observable<string> = this.myName$.asObservable();
myName(name: string) {
    this.myName$.next(name)
}

In ngOnInit(), listen to the Observable

ngOnInit() {

    this.name$ = this.myNameListener$.pipe(
        delay(0)
    )

}

Subscribe to the Observable in your html template using the async pipe

<div *ngIf=" (name$ | async) as name ">{{ name }}</div>

Now you can pass your actual data to the observable whenever needed.

this.myName(data);

For a working solution and avoiding change detection issues, visit this link.

Best of luck!

Answer 4

If you encounter an error, consider changing the troublesome variable to an Observable and applying the pipe with the delay(0) operator

Check out this link for a functional solution that eliminates errors without the need for change detection.

Here's an example:

Imagine using a variable named name of type string in your html template causing the aforementioned error.

<div>{{ name }}</div> // Error occurs here

This error can happen when Angular checks a value that changed after the initial check.

To resolve this, convert name into an Observable like name$

name$: Observable<string>; 

private myName$ = new BehaviorSubject<string>("");
myNameListener$: Observable<string> = this.myName$.asObservable();
myName(name: string) {
    this.myName$.next(name)
}

In ngOnInit(), listen to the Observable

ngOnInit() {

    this.name$ = this.myNameListener$.pipe(
        delay(0)
    )

}

Subscribe to the Observable in your html template using the async pipe

<div *ngIf=" (name$ | async) as name ">{{ name }}</div>

Now you can pass your actual data to the observable whenever needed.

this.myName(data);

For a working solution and avoiding change detection issues, visit this link.

Best of luck!

Answer 5

Answer №3

An efficient approach to managing this situation is to define the form group within the child component, allowing for easy reference in the parent template! This method not only promotes type safety but also results in cleaner code compared to alternative solutions.

<mat-step [stepControl]="step1.step1Form">
  <app-step1 #step1></app-step1>
</mat-step>

Answer 6

An efficient approach to managing this situation is to define the form group within the child component, allowing for easy reference in the parent template! This method not only promotes type safety but also results in cleaner code compared to alternative solutions.

<mat-step [stepControl]="step1.step1Form">
  <app-step1 #step1></app-step1>
</mat-step>

Dealing with Angular Material Stepper and utilizing Separate Components for individual steps, encountering the error of ExpressionChangedAfterItHasBeenChecked

Answer №1

Answer №2

Answer №3

Similar questions

Search through an array of objects and assign a new value

What is the best way to simulate a function on a service that will provide a rejected promise?

Exploring methods for testing React components with TypeScript's props

When creating a new instance of the Date object in Javascript, the constructor will output a date that is

Having trouble connecting my Express.js API to Angular6. My server setup seems to be causing the issue

Error message "Cannot access property 'template' of undefined" is thrown when using Material Design Mat-footer-row component

Leveraging the 'ref' keyword in TypeScript with Next.js

The error TS2339 occurs because the property 'remove' is not found in the type 'Document<unknown>'

Encountered a problem while creating a new Angular 7 app: Module 'temp' not found

Can you explain the significance of this line of code: elements:Array<any>?

`Running ng serve will result in the creation of a 'dist' folder within each app sub

unique prefix for every component in nrwl nx applications

Angular date control and its corresponding date panel are not properly aligned on the user interface

Angular 2 signal sender

Choosing the Right Language for AngularJS 2: TypeScript, JavaScript, or Dart?

A guide to sending epoch time data to a backend API using the owl-date-module in Angular

Having trouble sending a POST request to a .NET API through the browser but successful with Postman? Need some troubleshooting advice?

Steps to resolve the issue of MatCardComponent not being detected despite being imported within the module

Removing Multiple Object Properties in React: A Step-by-Step Guide

What is the best way to extract data from the currentValue property of SimpleChange objects?