如何重置Material Angular Stepper步骤？调用reset()报list未定义错误

问题场景 #

使用Material Angular Stepper时，希望切换步骤时重置对应步骤的表单。根据官方文档，调用MatStep的reset()方法可将步骤重置为初始状态（含表单数据），但调用时始终报错：Error: list is undefined。

相关代码 #

app.component.html #

<h1>{{ name }}</h1>
<hr />
<mat-stepper
  #stepper
  class="flex-grow-1"
  (selectionChange)="reloadStep($event)"
>
  <mat-step #s1>
    <ng-template matStepLabel>Username</ng-template>
    <ng-template matStepContent>
      <form>
        <input type="text" placeholder="Username" />
      </form>
    </ng-template>
  </mat-step>

  <mat-step #s2>
    <ng-template matStepLabel>Something else </ng-template>
    <ng-template matStepContent>
      <form>
        <input type="text" placeholder="Something else ..." />
      </form>
    </ng-template>
  </mat-step>
</mat-stepper>

app.component.ts #

import { Component, AfterViewInit, ViewChildren} from '@angular/core';
import { MatStepper, MatStep } from '@angular/material/stepper';
import { StepperSelectionEvent } from '@angular/cdk/stepper';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  name = "Material Angular Stepper";

  @ViewChildren('stepper') stepper!: MatStepper;
  @ViewChildren('s1') one!: MatStep;
  @ViewChildren('s2') two!: MatStep;

  steps: MatStep[] = [];

  ngAfterViewInit(): void {
    this.steps = [this.one, this.two];
  }

  reloadStep = (stepperEvent: StepperSelectionEvent) => {
    const index = stepperEvent.selectedIndex;
    console.log('step changed:', index);
    this.steps[index].reset();
  };
}

问题原因及解决方法 #

核心问题 #

@ViewChildren装饰器返回的是QueryList<T>集合类型，而非单个组件实例。代码中直接将this.one、this.two（实际是QueryList对象）存入数组并调用reset()，导致内部逻辑报错。

修复方案1：修正视图查询方式 #

将@ViewChildren改为@ViewChild（每个模板引用对应单个MatStep实例），确保获取到正确的MatStep对象：

修改后的app.component.ts：

import { Component, AfterViewInit, ViewChild} from '@angular/core';
import { MatStepper, MatStep } from '@angular/material/stepper';
import { StepperSelectionEvent } from '@angular/cdk/stepper';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  name = "Material Angular Stepper";

  @ViewChild('stepper') stepper!: MatStepper;
  @ViewChild('s1') one!: MatStep;
  @ViewChild('s2') two!: MatStep;

  steps: MatStep[] = [];

  ngAfterViewInit(): void {
    this.steps = [this.one, this.two];
  }

  reloadStep = (stepperEvent: StepperSelectionEvent) => {
    const index = stepperEvent.selectedIndex;
    console.log('step changed:', index);
    this.steps[index].reset();
  };
}

修复方案2：通过Stepper实例直接获取步骤 #

无需单独查询每个步骤，直接通过stepper.steps获取所有步骤列表，代码更简洁且不易出错：

修改后的reloadStep方法：

reloadStep = (stepperEvent: StepperSelectionEvent) => {
  const index = stepperEvent.selectedIndex;
  console.log('step changed:', index);
  this.stepper.steps.get(index)?.reset();
};

同时可以移除@ViewChild('s1')、@ViewChild('s2')和steps数组的定义，进一步简化代码。

内容的提问来源于stack exchange，提问作者script0