Угловой шаговый материал предотвращает шаг вперед, если выполняется какое-то условие

Мне интересно, как я могу пропустить пошаговое изменение в Angular Material Stepper.

Все «решения», которые я вижу, не работают. Я также попытался установить шаги, касающиеся некоторых условий, на editable = false. Но это означает, что шаг не может редактироваться, если пользователь коснулся его один раз. Инициализированный шаг с editable = false можно редактировать :(

Я хочу пропустить изменение шага, если значение равно «стоп».

Stackblitz

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() {}
}

Для следующего варианта использования необходимы:

Пользователь видит настраиваемую формулу с множеством полей ввода, флажками и т. Д. Если он внес изменения, но не отправил их и собирается щелкнуть другое диалоговое окно, следует проверить, не изменил ли он значения. Если это так, появится диалоговое окно подтверждения. В этом диалоговом окне пользователя спросят, откажется ли он от изменений или нет. Если он скажет «нет», то текущий выбранный шаг не должен уходить. Это работает для меня в моем приложении, но проблема в том, что анимация все равно выполняется, и поэтому оптически кажется, что пользователь находится на следующем этапе.


person Buzz    schedule 21.01.2020    source источник
comment
что, если вы используете директиву * ngIf для этого шага ‹mat-step label = Состояние второго шага = число * ngIf = inputValue! = 'stop'› Second Step ‹input type = text [(ngModel)] = inputValue› ‹/ mat- шаг>   -  person Ahmed Kesha    schedule 21.01.2020
comment
К сожалению, пользователь должен видеть шаги.   -  person Buzz    schedule 21.01.2020
comment
‹Mat-step label = состояние второго шага = число [завершено] = inputValue == 'stop'› Second Step ‹input type = text [(ngModel)] = inputValue› ‹/mat-step›   -  person Ahmed Kesha    schedule 21.01.2020
comment
Тоже не работает. Значки меняются на завершенные значки, как только inputValue становится Stop, но я все равно могу перемещаться :(   -  person Buzz    schedule 21.01.2020


Ответы (1)


Попробуйте создать класс css с отключенным именем

Запишите это в свой файл css withmaterial.component.css.

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

И напишите это в своем withmaterial.component.html

<mat-horizontal-stepper [ngClass]="{'disabled':inputValue =='stop'}" [linear]="false" #stepper (selectionChange)="checkValue($event)" >
person Ahmed Kesha    schedule 21.01.2020
comment
Спасибо, но это тоже не решение для меня. Пользователь должен иметь возможность щелкнуть и получить сообщение. Я обновляю вариант использования в своем вопросе, извините. - person Buzz; 22.01.2020