步进器 material ：在打字稿中使用 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 参考

首先使用散列符号

在html中定义模板引用变量

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

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

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

终于可以访问重置方法了

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

Working Example

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

Stepper material : using stepper.reset() inside typescript

angular-material

angular

stepper