CODEWITHSUNDEEP
angularbootstrap-4
Jose
Jose

Reputation: 1829

Radio Button Bootstrap 4 and Angular 4

I have a radio button with Bootstrap 4, and it works well, less than when I put one, it does not stay checked:

I have it in an application with Angular 4, and I do not know if I have to do it with an attribute or what syntax I should use, specifically.

Someone can help me, I was missing to check the buttons

Just start the screen are all unchecked.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" [value]="HOY" [(ngModel)]="sinImputarValue" (click)="sinImputarHoy();"> SIN IMPUTAR HOY
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" [value]="SEMANA" [(ngModel)]="sinImputarValue" (click)="sinImputarSemana();"> SIN IMPUTAR ESTA SEMANA
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" [value]="MES" [(ngModel)]="sinImputarValue" (click)="sinImputarMes();"> SIN IMPUTAR ESTE MES
  </label>
</div>


  sinImputarHoy(){
  console.debug("sinImputarHoy");
  this.limpiarFiltroManual();
  this.sinImputarValue = 'HOY';
}

sinImputarSemana(){
  console.debug("sinImputarSemana");
  this.limpiarFiltroManual();
  this.sinImputarValue = 'SEMANA';
}

sinImputarMes(){
  console.debug("sinImputarMes");
  this.limpiarFiltroManual();
  this.sinImputarValue = 'MES';
}

Upvotes: 2

Views: 13590

Answers (2)

mujtaba ahmad
mujtaba ahmad

Reputation: 31

in your typescriot file assign initially a vlaue which you want to be checked at start. 

<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" value="HOY" 
[(ngModel)]="sinImputarValue"> SIN IMPUTAR HOY
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" value="SEMANA" 
[(ngModel)]="sinImputarValue"> SIN IMPUTAR ESTA SEMANA
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" value="MES" 
[(ngModel)]="sinImputarValue"> SIN IMPUTAR ESTE MES
</label>
</div>

In Your .ts file 

sinImputarValue : string = 'HOY';

there is no need for sinImputarMes() function.

Upvotes: 3

Danish
Danish

Reputation: 496

Please use look at the below code

<label>This rule is true if:</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="true" [(ngModel)]="rule.mode">
</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" [value]="false" [(ngModel)]="rule.mode">
</label>

Angular 4 default radioButton Checked by Default

Upvotes: 0

Related Questions