angular - κουμπιά επιλογής 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

Κοιτάζοντας τον πηγαίο κώδικα του 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>