To get the selected radio button’s value in Angular, you can bind a function to the (change) event of the radio button and pass the $event object as an argument to this function.
You can then use the $event object to get the selected radio button’s value by accessing the $event.target.value property.
For example,
<div class="container">
<h2>Get Selected Radio Button's Value on Change Event</h2>
<div *ngFor="let gender of genderArr">
<input type="radio" name="gender" value="{{gender.value}}" (change)="onRadioChange($event)">
<label>{{gender.label}}</label>
</div>
<p>Selected Gender is: <b>{{selectedGender}}</b></p>
</div>
Define the onRadioChange() function inside your ts file:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedGender: any = '';
genderArr = [
{
label:'Male',
value: 'Male'
},
{
label:'Female',
value: 'Female'
},
{
label:'Others',
value: 'Others'
},
];
// Fires on Radio button's change event
onRadioChange(event:any){
// Get the selected value
this.selectedGender = event.target.value;
}
}
Output:
In this example, we have bound a function onRadioChange() to the (change) event of each radio button which will get fired every time user selects a value from the radio buttons.
Other than binding, we have also passed the $event object to the onRadioChange() function which we have used in our ts file to get the value of the selected radio button using event.target.value property.
2. Get the Selected Radio Button’s Value on Submit using Reactive Forms
If you are using radio buttons inside a reactive form, you can easily get the value of the selected radio button by accessing the value property of the FormControl object.
For example,
<div class="container">
<h2>Get Selected Radio Button's Value on Submit</h2>
<form [formGroup]="userForm" (ngSubmit)="submitForm()">
<div *ngFor="let gender of genderArr">
<input type="radio" name="gender" value="{{gender.value}}" formControlName="gender">
<label>{{gender.label}}</label>
</div>
<br>
<button type="submit">Submit</button>
</form>
<p>Selected Gender is: <b>{{selectedGender}}</b></p>
</div>
Add the code into your ts file:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedGender: any = '';
userForm: FormGroup;
genderArr = [
{
label: 'Male',
value: 'Male'
},
{
label: 'Female',
value: 'Female'
},
{
label: 'Others',
value: 'Others'
},
];
constructor(private fb: FormBuilder) {
// Create the form group
this.userForm = this.fb.group({
'gender': ['', Validators.required]
});
}
submitForm() {
// Get the selected gender
this.selectedGender = this.userForm.controls['gender'].value;
// Notify the user if he hasn't selected anything
if (this.selectedGender == '') {
alert('Please Select Gender');
}
}
}
Output:
If you are using template drive forms, go with the first approach to get the selected radio button’s value.
And if you are using reactive forms, the second approach can help you easily get the selected value.
That’s all for this article. Thanks for reading!
