How get checked value from radio button angular

user_10363054 0
Viewed 105692

I need to get value from radio button in angular. Suppose to have this html code:

 <label class="radio-inline">
   <input class="form-check-input" type="radio" [(ngModel)]="dog" name="gob" value="i" [checked]="true" (change)="onItemChange(item)"/>Dog
 </label>
 <label class="radio-inline"> 
   <input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat" value="p"  (change)="onItemChange(item)"/>Cat
 </label>

In my ts page I need to get the value of radio button like 

dog.value

My purpose is:

  1. Set default cheched to first radio button
  2. Get the value when I click on radio button

Anyone can help me?

angular6 angular
2 Answers

You can bind the data of radio button. Just add the value for radio button and change in the ngModel

html

<input class="form-check-input" type="radio" value="dog" 
[(ngModel)]="dog.value" name="gob" value="i" [checked]="true" 
(change)="onItemChange($event.target.value)"/>

ts

onItemChange(value){
   console.log(" Value is : ", value );
}
user_51663360

One of the easiest way is do like this:

html:

<input
type="radio"
id="a"
name="sample"
value="pure"
(change)="onChange($event)"
checked /> 
<label for="a">A</label> 

<input
type="radio"
id="b"
name="sample"
value="b"
(change)="onChange($event)" />
<label for="b">B</label>

ts:

onChange(e) {
   this.type= e.target.value;
}
user_88970740
Related