How to Get the Selected Radio Button’s Value in Angular?

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:

Get the selected radio button's value in Angular

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:

Get the selected radio button's value on submit in Angular

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!

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.