时间戳

首页 > 解决方案 > 如果某些条件为真，Angular Material Stepper 会阻止 Step forward

angular - 如果某些条件为真，Angular Material Stepper 会阻止 Step forward

问题描述

我想知道如何在 Angular Material Stepper 中跳过一步更改。

我看到的每个“解决方案”都不起作用。我还尝试将有关某些条件的步骤设置为可编辑 = 假。但这意味着，如果用户触摸一次，则该步骤无法编辑。用editable=false初始化的步骤可以编辑:(

如果值等于“停止”，我想跳过步骤更改。

堆栈闪电战

import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild("stepper") stepper;
  constructor(private router: Router) {
    this.router.navigate(['material']);
  }
  showMaterialPage() {}
}

对于需要以下用例：

用户会看到一个带有许多输入字段、复选框等的自定义公式。如果他进行了更改但没有提交更改并且他将单击另一个对话框，那么应该检查他是否更改了值。如果是，则会弹出一个确认对话框。在此对话框中，将询问用户是否放弃更改。如果他说不，那么当前选择的步骤不应该离开。这在我的应用程序中对我有用，但问题是动画无论如何都完成了，所以它在视觉上缝合了用户在下一步。

标签： angularsteppermat-stepper

解决方案

尝试创建禁用名称的 css 类

用material.component.css将它写在你的css文件中

.disabled{
  pointer-events: none !important;
}

并将其写入您的withmaterial.component.html

<mat-horizontal-stepper [ngClass]="{'disabled':inputValue =='stop'}" [linear]="false" #stepper (selectionChange)="checkValue($event)" >

推荐阅读