Angular 2 - 处理点击禁用输入

【问题标题】：Angular 2 - Handle click on disabled inputAngular 2 - 处理点击禁用输入
【发布时间】：2018-04-04 19:08:12
【问题描述】：

这就是我现在所拥有的。正在尝试调用checkToEnable 函数。

<input type="text" ([ngModel])="city.arr.date" [id]="city.id+'_arr_date'" [name]="city.id+'_arr_date'" [attr.disabled]="selectedTripType=='OT' ? true : null" class="input-icon-date input-default-last  form-control" (click)="checkToEnable()" placeholder="Return Date"/>

【问题讨论】：

这有什么问题？
@VivekDoshi 禁用时不会进入函数内部
可能是因为禁用而未触发点击。试试(mousedown)="checkToEnable()"
@SaurabhTiwari (mousedown) 没有帮助。
那么可能你不需要使用disabled。而是尝试模仿禁用的 css。

标签： html angular typescript

【解决方案1】：

禁用的元素不会触发鼠标事件。大多数浏览器都会将源自禁用元素的事件向上传播到 DOM 树，因此事件处理程序可以放置在容器元素上。

但是你可以通过这种方式实现它：

组件端：

disableTextbox =  false;

toggleDisable() {
    this.disableTextbox = !this.disableTextbox;
}

模板端：

<div (click)='toggleDisable()'>
  <input [disabled]='disableTextbox' >
</div>

WORKING DEMO

【讨论】：

@Lasitha，很高兴知道这一点:)。
@VivekDoshi 你能帮我解决这个问题吗stackoverflow.com/questions/52272192/…
似乎它不适用于按钮：toggleDisable() click 在用户点击按钮外部时触发。
太棒了，没想到这么简单的解决方案！
此解决方案似乎不适用于 Firefox。我正在运行 89.0 版。