步进器材料：在打字稿中使用 stepper.reset()

【问题标题】：Stepper material : using stepper.reset() inside typescript步进器材料：在打字稿中使用 stepper.reset()
【发布时间】：2021-09-04 23:42:38
【问题描述】：

是否可以在 ts 文件中使用 stepper.reset() ？我想做一些类似的事情

    onCheckRef() {
    if (this.refFormGroup.get('reference').invalid) {
      this.stepper.reset();
    } else {
      .....................
    }
  }

在模板中：

<button mat-button (click)="onCheckRef()" matStepperNext>Valider</button>

谢谢

【问题讨论】：

标签： angular angular-material stepper

【解决方案1】：

是的，您可以使用 ViewChild 装饰器访问组件内部的 MatStepper 参考

首先使用哈希符号在html中定义模板引用变量

<mat-horizontal-stepper [linear]="isLinear" #stepper>
.....
</mat-horizontal-stepper>

然后在组件内部使用 ViewChild 装饰器访问步进器实例

 @ViewChild('stepper',{read:MatStepper}) stepper:MatStepper;

终于可以访问reset方法了

onCheckRef() {
    if (this.refFormGroup.get('reference').invalid) {
      this.stepper.reset();
    } else {
      .....................
    }
  }

Working Example

【讨论】：