Angular & Bootstrap Группа ввода с хостом пользовательских элементов - PullRequest
Новая
       6

Angular & Bootstrap Группа ввода с хостом пользовательских элементов

0 голосов
/ 21 марта 2020

У меня есть пользовательский элемент Angular - в основном HTML ввод с проверкой для ввода чисел или ввода даты. Использование в Angular шаблоне: 

<div class="input-group">
    <app-input-number 
        formControlName="amount_received"
        ngbAutofocus 
        class="form-control"   
    >
    </app-input-number>

    <div class="input-group-append">
        <span class="input-group-text">USD</span>
    </div>
</div>

Визуализированный вывод: 

<div _ngcontent-omn-c8="" class="input-group">
 <app-input-number _ngcontent-omn-c8="" class="form-control-host ng-pristine ng-valid ng-touched" formcontrolname="amount_received" ngbautofocus="" _nghost-omn-c10="" ng-reflect-name="amount_received">
  <input _ngcontent-omn-c10="" class="form-control text-right" type="text">
 </app-input-number>

 <div _ngcontent-omn-c8="" class="input-group-append">
  <span _ngcontent-omn-c8="" class="input-group-text">EUR</span>
 </div>
</div>

Проблема в пользовательском элементе <app-input-number. Я вижу 2 возможных решения:

1 / Изменить Bootstrap селектор: измените .input-group > .form-control на .input-group .form-control, я хотел бы избежать некоторой жесткой перезаписи. Есть ли способ, как изменить?

2 / Render Angular компонент без тега переноса. Это возможно?

Спасибо

1 Ответ

0 голосов
/ 21 марта 2020

Если вы не хотите добавлять дополнительные пользовательские элементы, попробуйте вместо этого использовать директивы. Angular Материальный компонент ввода является отличным примером: https://material.angular.io/components/input/overview

...