Angular Материал Stepper предотвращает Шаг вперед, если выполняется какое-либо условие - PullRequest
1 голос
/ 21 января 2020

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

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

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

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

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

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

1 Ответ

1 голос
/ 21 января 2020

Попробуйте создать 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)" >
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...