How get checked value from radio button angular

Question

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:

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

Anyone can help me?

check out this question stackoverflow.com/questions/52927544/… — Alex
– Alex, Commented Oct 22, 2018 at 11:13

Tamer Abdelsalam · Accepted Answer · 2020-02-28 05:41:01Z

53

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

edited Feb 28, 2020 at 5:41

Tamer Abdelsalam

474 bronze badges

answered Oct 22, 2018 at 11:11

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hossein Ganjyar · Accepted Answer · 2022-06-14 12:13:36Z

6

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

answered Jun 14, 2022 at 12:13

Hossein Ganjyar

8638 silver badges18 bronze badges

Comments

Christian Paul Gastardo · Accepted Answer · 2024-02-25 12:58:50Z

0

In your code, in order to group the radio buttons, they should have the same input for name attribute.

To solve your problem, you can use *ngFor to loop through the radio inputs,

HTML:

    <div *ngFor="let opt of options; let i=index">
      <label class="radio-inline">
        <input type="radio" class="form-check-input" [value]="opt.value" [name]="opt.name" [checked]="i == 0"
        (change)="onRadioChange(opt)"/>
      </label>
    </div>

TS:

interface Option {
 name: string;
 value: string;
}

options: Option[] = [
 {
   name: "pet",
   value: "dog"
 },
 {
   name: "pet",
   value: "cat"
 }
]

onRadioChange(opt: Option) {
 console.log(`Value is: ${opt.value}`)
}

Defining a radio group

answered Feb 25, 2024 at 12:58

Christian Paul Gastardo

1,2711 gold badge9 silver badges8 bronze badges

Collectives™ on Stack Overflow

How get checked value from radio button angular

3 Answers 3

html

ts

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

html

ts

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related