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

Arun19wadikar commented 4 years ago

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>

stepControl_Error

codymikol commented 4 years ago

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

crisbeto commented 4 years ago

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

ChazUK commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago