bootstrap 个单选按钮

Question

我正在使用 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>

但是不行，需要包成团吗？？

Answer 1

调查the source code of the ngbRadioGroup，我相信你猜对了——我们需要换一个组。我希望我们可以使用 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>

bootstrap 个单选按钮

Ng bootstrap radio buttons

typescript

ng-bootstrap

angular