Как я могу щелкнуть вход HTML внутри группы ввода Bootstrap 4, чтобы запустить связанное событие 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}}, но не может вызвать событие, если оно не входит в группу ввода оболочки. Я предполагаю, что элемент блокирует ввод, но я не могу найти способ обойти это.

Есть ли способ CSS или Bootstrap обходной путь, позволяющий мне это сделать?

Answer 1

Решено. Проблема заключалась в атрибуте disabled на каждом из моих входов, и он не имел ничего общего с Bootstrap или div обертки.

Удаление атрибута disabled разрешало событие.

UPDATE: Для тех, кто сталкивался с этой конкретной c проблемой, ее можно решить, просто заменив атрибут «disabled» на входе на «только для чтения». Ссылка во вводе станет активной, но ввод недоступен для редактирования.