как предотвратить поведение по умолчанию для события click в MatHorizontStepper - PullRequest
Новая
       9

как предотвратить поведение по умолчанию для события click в MatHorizontStepper

0 голосов
/ 26 октября 2018

Я работаю в приложении Angular.У меня есть MatHorizontStepper, и мне интересно, как предотвратить поведение по умолчанию кнопок «Вперед» и «Назад».Я думал, что мог бы просто использовать event.preventDefault () в обработчиках кликов, но это, похоже, не работает.

Вот HTML-код для кнопок: 

<mat-horizontal-stepper>
…
  <button *ngIf="scrnIndex > 0" mat-raised-button matStepperPrevious type="button" (click)="backClicked($event, scrnIndex)">Back</button>
  <button *ngIf="scrnIndex < formScreens.length - 1" mat-raised-button matStepperNext type="button" (click)="nextClicked($event, scrnIndex)”>Next</button>
…
</mat-horizontal-stepper>

Вот обработчик кликов: 

nextClicked(event, screenIndex) {
  event.preventDefault();
  this.validateCurrentPage(screenIndex);
}

Я пытаюсь предотвратить переход степпера на следующую страницу, пока пользователь не нажмет «подтвердить» в диалоговом окне, которое появляется в ответ на любые недопустимые значения на странице (это означает, что мы не обязательно хотим остановить продвижение пользователя с недопустимыми значениями, но мы хотим предупредить их с помощью диалогового окна).

Функция ValidateCurrentPage () выполняет проверку и вызываетдиалоговое окно, если оно обнаруживает недопустимые значения: 

ValidateCurrentPage() {
    …
  const dialog = new GeneralDialogModel(
    'Past Dates/Times Detected',  // Title
    'One or more dates and/or times are in the past. Is this intentional?', // Content text
    'Yes',                        // Confirm button text
    'No');                        // Cancel button text
  const dialogRef = this._dialog.open(GeneralDialogComponent, { data: dialog });
  dialogRef.afterClosed().subscribe(result => {
…
  });
…
}

Поскольку диалоговое окно запускается в другом потоке, validateCurrentPage () возвращается до того, как пользователь может нажать «да» или «нет», что означает, что обработчик события щелчка возвращаетпрежде чем пользователь может нажать «да» или «нет».Затем происходит стандартное поведение события click: степпер переходит на следующую страницу.event.peventDefault () не остановил его.

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

...