Блог

Главная - Вопросы по программированию - Переключатели начальной загрузки Ng

Переключатели начальной загрузки Ng

#angular #typescript #ng-bootstrap

Вопрос:

Я использую переключатели NG-Bootstrap, подобные этому

 <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="model">
  <label ngbButtonLabel class="btn-primary">
    <input ngbButton type="radio" [value]="1"> Left (pre-checked)
  </label>
  <label ngbButtonLabel class="btn-primary">
    <input ngbButton type="radio" [value]="2"> Middle
  </label>
  <label ngbButtonLabel class="btn-primary">
    <input ngbButton type="radio" [value]="3"> Right
  </label>
</div>

И в дополнение

 this.radioGroupForm = this.formBuilder.group({
  'model': 1,
});

Это работает нормально, потому что все кнопки находятся в одной строке, но что, если мне понадобится другой html, эта третья
кнопка будет в другом месте в html, я попробовал что-то вроде этого

 <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="model">
   <label ngbButtonLabel class="btn-primary">
      <input ngbButton type="radio" [value]="1"> Left (pre-checked)
   </label>
   <label ngbButtonLabel class="btn-primary">
      <input ngbButton type="radio" [value]="2"> Middle
   </label>
</div>

<div class="row">
   <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="model">
      <label ngbButtonLabel class="btn-primary">
        <input ngbButton type="radio" [value]="3"> Right
      </label>
   </div>
</div>

Но это не работает, нужно ли его упаковывать в группу??

Ответ №1:

Изучая исходный код ngradiogroup, я полагаю, что вы правы — нам нужно объединить группу. Я бы ожидал, что мы сможем использовать ng-container , чтобы избежать добавления HTML:

 <ng-container ngbRadioGroup name="radioBasic" formControlName="model">
    <div class="btn-group btn-group-toggle" >
       <label ngbButtonLabel class="btn-primary">
          <input ngbButton type="radio" [value]="1"> Left (pre-checked)
       </label>
       <label ngbButtonLabel class="btn-primary">
          <input ngbButton type="radio" [value]="2"> Middle
       </label>
    </div>
    
    <div class="row">
       <div class="btn-group btn-group-toggle">
          <label ngbButtonLabel class="btn-primary">
            <input ngbButton type="radio" [value]="3"> Right
          </label>
       </div>
    </div>
</ng-container>
Метки: