Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How get checked value from radio button angular

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?

like image 559
Doflamingo19 Avatar asked Oct 22 '18 10:10

Doflamingo19


People also ask

Does radio button have checked value?

If a radio button is checked, its checked property is true . Then, we assign the value of the selected radio button to the selectedSize variable. Since only one radio button in a radio group can be checked at a time, the loop is terminated immediately by the break statement.

How to get selected radio button value on form submit in angular?

Angular Get Selected Radio Button Value On Form Submit 1 Step 1 – Import Module. 2 Step 2 – Add Code on View File. In this step, create simple reactive form with a radio button input field element. ... 3 Step 3 – Use Component ts File. In this step, visit the src/app directory and open app.component.ts. ... In this step,... More ...

What are radio form controls in Angular 4?

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular 12 and Angular 13 Radio form controls are used to allow a user only to select a single value out of a list in the radio group. In angular, we can use either the template-driven forms or reactive forms approach.

How to register radio button and checkbox in ngform using ngmodel?

We need to use ngModel as an attribute in radio button and checkbox so that they can be registered with NgForm directive. 2. Fetch Value on Form Submit When we submit the form and suppose the form value is stored in the instance of NgForm as form then we can fetch radio button and checkbox value using form.controls [...] as given below.

How to get the value of the checked radio button?

The value of the checked radio button can be fetched with the help of the ng-model directive that helps to bind the data with the specific element & stores the required value in a variable, that can be utilized whenever we require that particular value.


1 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 );
}
like image 193
Sunil Singh Avatar answered Oct 30 '22 15:10

Sunil Singh