当我在确认窗口中单击“取消"时,mat-slide-toggle不应更改其状态 [英] mat-slide-toggle shouldn't change it's state when I click cancel in confirmation window

查看:78
本文介绍了当我在确认窗口中单击“取消"时,mat-slide-toggle不应更改其状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我检查幻灯片切换开关时,它应该可以正常工作.但是,当我尝试取消选中它时,会出现一个确认窗口,询问您是否确定.当我在该确认窗口中单击取消"时,切换仍变为未选中状态,这是不应该发生的.它应该保持相同的状态.

When I checked the slide toggle it should work as expected. But when I try to uncheck it there is a confirmation window asking if you are sure. When I click cancel in that confirmation window, still the toggle changes to unchecked, which shouldn't happen. It should stay in the same state.

这是我的HTML和TS代码

Here is my Html and TS Code

// 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()也不起作用.

when the confirmation window comes while trying to uncheck the toggle button and I click the cancel option there, nothing should happen to the toggle. stopPropagation() is also not working.

Edit1 :我尝试在else语句中返回false.没有工作.甚至试图更改e.checked = false.它只是更改了事件对象的值,但并未阻止切换滑动

Edit1 :I tried doing return false in else statement. didn't worked. Even tried to change the e.checked = false. It just changed the event object value but didn't prevent the toggle from slidding

推荐答案

不幸的是,您不能将 stopPropagation mat-slide-toggle 一起使用,您需要以编程方式设置在您else条件下的事件中,将检查后的值恢复为 true .

Unfortunately you cannot use stopPropagation with mat-slide-toggle, you will need to programmatically set the checked value back to true on the event in your else condition.

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

这篇关于当我在确认窗口中单击“取消"时,mat-slide-toggle不应更改其状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆