如何單擊 Bootstrap 4 輸入組內的 HTML 輸入來觸發綁定的 Angular 事件

Question

我有一個 Bootstrap 4 輸入組，其中包含一個前置標題和一個輸入，如圖所示：

    <div class="input-group" (click)="openDoc()">
      <div class="input-group-prepend input-group-prepend-split rounded-0">
          <label class="input-group-text rounded-0 bg-white">Name</label>
      </div>
      <input type="text" class="form-control rounded-0" value="{{_transaction.originalDoc?.name}}" disabled>
      <input type="text" class="form-control rounded-0 link" value="{{_transaction.doc?.name}}" disabled>
   </div>

我想讓事件(click)="openDoc()"存在於具有value: {{_transaction.doc?.name}}的第二個輸入中value: {{_transaction.doc?.name}} ，但除非它在包裝器輸入上，否則無法觸發事件-團體。 我假設該元素正在阻止輸入，但我無法找到繞過它的方法。

是否有 CSS 方法或 Bootstrap 解決方法允許我執行此操作？

Answer 1

解決。 問題是我的每個輸入上的 disabled 屬性，與 Bootstrap 或包裝 div 無關。

刪除 disabled 屬性允許事件觸發。

更新：對於遇到此特定問題的任何人，只需將輸入上的“禁用”屬性替換為“只讀”即可解決。 輸入中的鏈接將變為可點擊，但輸入不可編輯。