Angular2 - How can I know which radio button is selected in Angular2 application

Question

I have the next radio buttons in my html:

<div class="col-lg-4" id="radioButtons"> 
    <form action="">
        <fieldset id="capacity">
            <legend>capacity</legend>
            <label for="input-ao"><input size=25 id="input-ao" type="radio" name="capacity" [value]="0-30" checked="checked" />0-30</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="30-60"/>30-60</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="60-100"/>60-100</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="capacity" [value]="100"/>100+</label>
            <br>
        </fieldset>
        <fieldset id="computerFieldset">
            <legend>computer</legend>
            <label for="input-ao"><input size=25 id="input-ao" type="radio" name="comp" value="yes" checked="checked" />yes</label>
            <label for="input-lo"><input id="input-lo" type="radio" name="comp" value="no"/>no</label>
            <br>
        </fieldset>
    </form>
</div>

I want to know which radio button is selected, also I want to know will it cause a problem that I have a default checked="checked"? Thank you.

You should not have 2 radio buttons with the same id - in your HTML structure. It will mess up the functionality, IMO. — Hunor, Jun 12 '19 at 04:30
Have a look at the link :- https://stackoverflow.com/questions/31879497/angular2-radio-button-binding — Krishna, Jun 12 '19 at 04:33

score 1 · Answer 1 · answered Jun 12 '19 at 04:29

You need to add [(ngModel)]="YourVariableFromTsCodeBehindFile" to each radio button of your radio group.

It should look like,

<div class="col-lg-4" id="radioButtons"> 
  <form action="">
    <fieldset id="capacity">
      <legend>capacity</legend>
      <label for="input-ao"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" size=25 type="radio" name="capacity" value="0-30" checked="checked" />0-30</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="30-60"/>30-60</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="60-100"/>60-100</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom1stGroup" type="radio" name="capacity"  value="100"/>100+</label>
      <br>
      {{selectedRed}}
    </fieldset>

    <fieldset id="computerFieldset">
      <legend>computer</legend>
      <label for="input-ao"><input size=25 [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="yes" checked="checked" />yes</label>
      <label for="input-lo"><input [(ngModel)]="selectedRadioBtnFrom2ndGroup" type="radio" name="comp" value="no"/>no</label>

      <br>
    {{blue.id}}   
    </fieldset>  
  </form>
</div>

Demo: https://stackblitz.com/edit/angular-material-radio-button-demo-ksrxbc?file=app/app.component.html

Hunor · Answer 2 · 2019-06-12T04:26:31.067

0

You could use a changeHandler method, for example - as it is shown in this video: https://www.youtube.com/watch?v=Wo9nfK2fEyw

Example:

<label for="input-ao"><input size=25 id="input-ao" type="radio" name="capacity" [value]="0-30" checked="checked" (change)="radioChangeHandler($event)" />0-30</label>

radioChangeHandler(event: any){
    this.selectedRadioButton = event.target.value;
}

edited Jun 12 '19 at 04:26

answered Jun 12 '19 at 04:20

Hunor

449
1
5
19

score 0 · Answer 3 · answered Jun 12 '19 at 04:27

You can make a function called radioChanged() And within this function you can console the value of the selected radio input

radioChange(event: any){console.log(event.target.value)}

Its just an idea. Because i have no laptop right now.. If you do not understand the concept let me know i will edit the answer

Angular2 - How can I know which radio button is selected in Angular2 application

3 Answers3