Radio Button Bootstrap 4 and Angular 4

Question

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';
}

what is what do you want ? save checked on variable or what? you are detecting the click and you are doing well. what's your question? — Daniel Segura Pérez, Nov 30 '17 at 11:42
please use (ngModel) on all of the input radio buttons; Please read this : https://stackoverflow.com/questions/43780840/angular-4-default-radiobutton-checked-by-default — Danish, Nov 30 '17 at 11:50
Danish ... Update my code (see my question again) with what you put in the link you gave me, but still not let me check the option I choose. Thank you. — Jose, Nov 30 '17 at 12:07

mujtaba ahmad · Answer 1 · 2018-10-11T22:10:55.907

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.

score 0 · Answer 2 · answered Nov 30 '17 at 12:47

0

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

answered Nov 30 '17 at 12:47

Danish

497
5
14

As I indicated in the comment above, I applied what you put in that link in my example and it still does not work. Greetings. – Jose Nov 30 '17 at 14:16
But I'm not worth with true or false, they are three values, they can even be more. I need a set of buttons that are checked one of them and only one at a time, now the functionality does it well, only that the one that is really checked does not light up. – Jose Nov 30 '17 at 15:50

Radio Button Bootstrap 4 and Angular 4

2 Answers2