bug(material/stepper): ExpressionChangedAfterItHasBeenCheckedError. Previous value: 'stepControl: undefined'. Current value: 'stepControl: [object Object]'

[Arun19wadikar]

Error:

I got below error on below action.
Action: while initializes the first step of stepper.
Error:
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'stepControl: undefined'. Current value: 'stepControl: [object Object]'

This console error is not breaking the UI but need to remove this as this is not the good practice

Angular version.

"@angular/material": "^8.2.3"
"@angular/cli": "^8.3.9",

Code Snippet:

<mat-horizontal-stepper [linear]="true" #stepper labelPosition="bottom">
  <ng-template matStepperIcon="edit">
    <mat-icon>done</mat-icon>
  </ng-template>
  <mat-step [stepControl]="firstStepComponent.firstFormGroup">
    <ng-template matStepLabel class="mat-step-label">First Step</ng-template>
    <div class="wizard-container">
      <div class="wizard-heading">First Step</div>
      <div class="wizard-content">
        <app-first-step [source]="test.source" (resetFunction)="restFunction()"
          (afterSelection)="save($event)" (goToNextStep)="nextStep()">
        </app-first-step>
      </div>
    </div>
  </mat-step>
  <mat-step [stepControl]="secondStep.secondGroupWrapper" [optional]="isOptional">
    <ng-template matStepLabel class="mat-step-label">Second Step</ng-template>
    <div class="wizard-container">
      <div class="wizard-heading">
        <div>Second Step <span class="optional" *ngIf="isOptional">(Optional)</span></div>
      </div>
      <div class="wizard-content">
        <app-second-step [selectedFilters]="test.filter" [source]="test.source"
          (resetData)="resetData($event)"></app-second-step>
      </div>
    </div>
  </mat-step>

[codymikol]

Please submit Angular Material questions here and issues here. This repo is for AngularJS Material.

[crisbeto]

Can you post a Stackblitz that shows the issue? It's hard to tell what is going on purely from the markup.

[ChazUK]

I'm also having a similar issue. I'm trying to use 2 Forms inside a child component.

@crisbeto https://stackblitz.com/edit/angular-ivy-xvxwdq

I'm also getting an error ERROR Error: Cannot read property '_syncPendingControls' of null when trying to submit the form.

[ChazUK]

This is still driving me crazy trying to figure out how to do this in an "atomic" way.

Passing the FormGroup seems to be bad practice. Moving the FormGroups to the Stepper parent would mean that the child components wouldn't "work" on their own without the FormGroup being passed to it (unnecessary bootstrapping).

Currently I'm using Outputs to pass an event to go .previous() or .next() on the stepper, but this loses the Stepper .reset() functionality which is really useful. And adding more Inputs and Outputs to reset every form in each steps seems like a lot more hassle.

Are there any more examples of how to use the stepper with child components?

[aminesafi8]

Error:

I got below error on below action.
Action: while initializes the first step of stepper.
Error:
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'stepControl: undefined'. Current value: 'stepControl: [object Object]'

This console error is not breaking the UI but need to remove this as this is not the good practice

Angular version.

"@angular/material": "^8.2.3"
"@angular/cli": "^8.3.9",

Code Snippet:

<mat-horizontal-stepper [linear]="true" #stepper labelPosition="bottom">
  <ng-template matStepperIcon="edit">
    <mat-icon>done</mat-icon>
  </ng-template>
  <mat-step [stepControl]="firstStepComponent.firstFormGroup">
    <ng-template matStepLabel class="mat-step-label">First Step</ng-template>
    <div class="wizard-container">
      <div class="wizard-heading">First Step</div>
      <div class="wizard-content">
        <app-first-step [source]="test.source" (resetFunction)="restFunction()"
          (afterSelection)="save($event)" (goToNextStep)="nextStep()">
        </app-first-step>
      </div>
    </div>
  </mat-step>
  <mat-step [stepControl]="secondStep.secondGroupWrapper" [optional]="isOptional">
    <ng-template matStepLabel class="mat-step-label">Second Step</ng-template>
    <div class="wizard-container">
      <div class="wizard-heading">
        <div>Second Step <span class="optional" *ngIf="isOptional">(Optional)</span></div>
      </div>
      <div class="wizard-content">
        <app-second-step [selectedFilters]="test.filter" [source]="test.source"
          (resetData)="resetData($event)"></app-second-step>
      </div>
    </div>
  </mat-step>

This issue can be solved simply by injecting into the constructor private cdRef: ChangeDetectorRef
And in the ngAfterViewInit cycle hook just call the method detectChanges()
ngAfterViewInit(): void { this.cdRef.detectChanges(); }