To check if a radio button is checked or unchecked in Angular, you can use its [checked] property.
The checked property is a boolean property which is set to true or false based on the current state of the radio button.
If the radio button is selected(checked), the checked property is automatically set to a boolean value true, otherwise, it is set to false.
For example, let’s say we have three radio buttons in our template file and we want to get the value of the selected radio button.
To access the value and state of the radio button, we have to pass the $event object as an argument from our template to the ts file. As you can see in the following example:
<div> <p>Select Your Gender:</p> <input type="radio" name="gender" value="Male" (change)="checkStatus($event);">: Male<br> <input type="radio" name="gender" value="Female" (change)="checkStatus($event);">: Female<br> <input type="radio" name="gender" value="Others" (change)="checkStatus($event);"> :Others<br> </div>
Next, define the checkStatus() function inside your ts file to check the current status of the radio button:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Function to check radio button's status
checkStatus(event:any){
// Check if radio button is checked
if(event.target.checked == true){
// Get checked radio button's value
let radioValue = event.target.value;
// Print in console
console.log(radioValue+ ' is Selected');
}
}
}
Output:
In this example, we have passed the $event object from the template file as an argument to the checkStatus() function.
Inside the checkStatus() function, we use the event.target.checked to get the current status of the radio button and event.target.value to get its value.
If the event.target.checked returns true, it means the radio button is selected otherwise not.
2. Using the Template Reference Variables
Alternatively, you can use the template reference variables to check if the radio button is checked or unchecked.
In this method also, we use the checked property of the radio button to check if it is checked or not.
But, instead of using the $event object, we create a reference for the radio button and then use it to access the value of the checked property.
To create a template reference variable for an element in Angular, you can use the # symbol followed by the variable name to assign the variable to an element in the template eg. #myVar.
You can then use the template reference variable anywhere in the template file to refer to the element.
Let’s take the previous example again and create a template reference variable for each radio button and use it to access the checked property:
<div> <p>Select Your Gender:</p> <input type="radio" name="gender" value="Male" #maleRef> Male<br> <input type="radio" name="gender" value="Female" #femaleRef> Female<br> <input type="radio" name="gender" value="Others" #othersRef> Others<br><br> <button (click)="getSelectedGender(maleRef, femaleRef, othersRef)">Get Selected Gender</button> </div>
Add the code in your ts file:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Function to check radio button's status
getSelectedGender(male:any, female:any, others:any){
if(male.checked){
console.log('You have selected '+ male.value);
}
else if(female.checked){
console.log('You have selected '+ female.value);
}
else if(others.checked){
console.log('You have selected '+ others.value);
}
else{
console.log('No option is selected');
}
}
}
Output:
In this example, we have created three template reference variables #maleRef, #femaleRef and #othersRef for three radio buttons.
Each reference variable is then passed to the getSelectedGender() function to get the current state and the value of the radio button.
The main advantage of this approach is that you can pass the current state(#ref.checked) of the radio button to any function in the entire template file.
3. Using Reactive Forms Module
If you are using radio buttons inside Angular’s reactive forms, you can easily get the selected radio button’s value by accessing the value property of the form control.
For example,
<div>
<p>Select Your Gender:</p>
<form [formGroup]="genderForm">
<input type="radio" formControlName="gender" value="Male"> Male<br>
<input type="radio" formControlName="gender" value="Female"> Female<br>
<input type="radio" formControlName="gender" value="Others"> Others<br><br>
<button (click)="getSelectedGender()">Get Selected Gender</button>
</form>
</div>
Add the code in the 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 {
// Declare the form group
genderForm: FormGroup;
constructor(private fb: FormBuilder) {
// Create the form
this.genderForm = this.fb.group({
'gender': ['', Validators.required]
});
}
// Function to get selected radio button's value
getSelectedGender() {
let selectedValue = this.genderForm.controls['gender'].value;
if (selectedValue) {
console.log('You have selected ' + selectedValue);
}
else {
console.log("You haven't selected anything.");
}
}
}
Output:
Conclusion
In this article, we learned how we can check if a radio button is checked or unchecked in Angular.
If you are using template-driven forms, then you can directly use the checked property of the radio button to check if it is checked or not.
But if you are using reactive forms, then you can use the value property of the form control object to get the value of the selected radio button from a group of radio buttons.
Thanks for reading!
