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

Question

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

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

在模板中：

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

谢谢

Answer 1

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

首先在html中使用hash sympol定义模板引用变量

<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