mat-slide-toggle не должен менять свое состояние, когда я нажимаю кнопку отмены в окне подтверждения

Question

Когда я проверил переключение слайдов, оно должно работать как положено.Но когда я пытаюсь снять галочку, появляется окно подтверждения с вопросом, уверены ли вы.Когда я нажимаю кнопку «Отмена» в этом окне подтверждения, переключатель все равно переключается на непроверенный, чего не должно быть.Он должен оставаться в том же состоянии.

Вот мой HTML и код TS

// html
<mat-slide-toggle 
   (change)="change($event)" [checked]="isChecked()" >
     To-pay
   </mat-slide-toggle>

Код TS:

// ts
    change(e) {
       if(this.checked) {
           if(confirm("Are you sure")) {
              console.log("toggle")
           }
           else {
              e.stopPropagation();
                console.log("toggle should not change if I click the cancel button")
           }
        }
    }

, когда появляется окно подтверждения при попыткеснимите флажок с кнопки переключения, и я нажимаю там кнопку отмены, с переключателем ничего не должно происходить.stopPropagation () также не работает.

Edit1 : я попытался выполнить return false в операторе else.не сработало.Даже пытался изменить e.checked = false.Он просто изменил значение объекта события, но не предотвратил скольжение переключателя

Answer 1

К сожалению, вы не можете использовать stopPropagation с mat-slide-toggle, вам необходимо программно установить проверенное значение обратно на true для события в вашем другом состоянии.

else {
        e.source.checked = true;
        console.log("toggle should not change if I click the cancel button")
      }

Stackblitz

https://stackblitz.com/edit/angular-79yf7m?embed=1&file=app/slide-toggle-overview-example.ts

Answer 2

Я думаю, дело в том, что (change) = "eventHandler ()" сработает ПОСЛЕ изменения значения, а (ngModelChange) = "eventHandler ()" сработает ДО изменения значения