Angular Material Stepper with Separate Component for each step - ExpressionChangedAfterItHasBeenCheckedError

Question

I have a material stepper with forms in each step of the stepper. There, each step should be controlled by the form associated with it.

Even though this question has already been asked in SO, the answers to those questions do not resolve my issue. Hence I am asking.

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> 

In my parent component, I have following.

@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;
}

My 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>

Now, when I run the app, In the console, I see following.

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

As I mentioned before, there are discussions on the same in SO. For example, answer and the comments of the following linked question suggest to move form initialization to the constructor instead of having it in the onInit. I have done so.

Angular Material Stepper Component For Each Step

However, I still get the error.

This is my project on Stackblitz - https://stackblitz.com/github/vigamage/stepper-component-wise

Can someone suggest how to get rid of the issue?

Thank you..

Answer 1

Basically, the angular is detecting the change after it has already set the value as null for both values. So, you need to explicitly tell angular that it should run change detection. Check out this demo code

I have removed the logic of using get because its a bad practice to call a function directly from an HTML. It'll be called multiple times. Try putting console log in your code and see.

I have used ngAfterViewInit along with ChangeDetectorRef to inform.

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();
  }

}

This will solve the error