Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

258
Vistas
Ng bootstrap radio buttons

I am using NG-Bootstrap radio buttons like this

<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>

And in compoment

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

It is working OK, because all button are in one line, but what if I need different html that third button will be on another place in html, i have tried something like this

<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>

But it does not work, does it need to be wrapped in a group??

over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Looking into the source code of the ngbRadioGroup, I believe you guess is right - we need to wrap a group. I would expect we can use ng-container to avoid addition 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>
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda