Angular Get Selected Radio Button Value

Angular gets selected radio button value example. In this tutorial, you will learn how to get the selected radio button value in angular on form submit and change event.

As well as, this tutorial will guide you step by step on how get selected radio button value with reactive form in angular on form submit and onchange event. And also use reactive form with formGroup in angular app.

Angular Reactive Form with Radio Button

There are two way to get selected radio button on form submit and onchange event with reactive form in angular app:

  1. Angular Get Selected Radio Button Value On Form Submit
  2. Angular Get Selected Radio Button Value On OnChange Event

Angular Get Selected Radio Button Value On Form Submit

Step 1 – Import Module

Then, Open app.module.ts file and import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file like following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2 – Add Code on View File

In this step, create simple reactive form with a radio button input field element. So, visit src/app/app.component.html and update the following code into it:

<div class="container">
    <h1>Angular Radio Button Example - tutsmake.com</h1>

    <form [formGroup]="form" (ngSubmit)="submit()">

        <div class="form-group">
            <label for="gender">Gender:</label>
            <div>
              <input id="male" type="radio" value="male" name="gender" formControlName="gender">
              <label for="male">Male</label>
           </div>

           <div>
              <input id="female" type="radio" value="female" name="gender" formControlName="gender">
              <label for="female">Female</label>
           </div>

            <div *ngIf="f.gender.touched && f.gender.invalid" class="alert alert-danger">
                <div *ngIf="f.gender.errors.required">Name is required.</div>
            </div>
        </div>

        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

Step 3 – Use Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  form = new FormGroup({
    gender: new FormControl('', Validators.required)
  });

  get f(){
    return this.form.controls;
  }

  submit(){
    console.log(this.form.value);
  }

}

Angular Get Selected Radio Button Value On OnChange Event

Step 1 – Import Module

Then, Open app.module.ts file and import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file like following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2 – Add Code on View File

In this step, create simple reactive form with a radio button input field element. So, visit src/app/app.component.html and update the following code into it:

<div class="container">
    <h1>Angular Radio Button Example - tutsmake.com</h1>

    <form [formGroup]="form" (ngSubmit)="submit()">

        <div class="form-group">
            <label for="gender">Gender:</label>
            <div>
              <input id="male" type="radio" value="male" name="gender" formControlName="gender" (change)="changeGender($event)">
              <label for="male">Male</label>
           </div>

           <div>
              <input id="female" type="radio" value="female" name="gender" formControlName="gender" (change)="changeGender($event)">
              <label for="female">Female</label>
           </div>

            <div *ngIf="f.gender.touched && f.gender.invalid" class="alert alert-danger">
                <div *ngIf="f.gender.errors.required">Name is required.</div>
            </div>
        </div>

        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

Step 3 – Use Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  form = new FormGroup({
    gender: new FormControl('', Validators.required)
  });

  get f(){
    return this.form.controls;
  }

  submit(){
    console.log(this.form.value);
  }

  changeGender(e) {
    console.log(e.target.value);
  }

}

Start Angular App

In this step, execute the following command on terminal to start angular app:

ng serve

Recommended AngularTutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *