Angular 11 Radio Button Reactive Form Example

Angular 11 Radio Button Reactive Form Example

Angular 11 gets selected radio button value example. In this tutorial, you will learn how to get the selected radio button value in angular 11 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 11 on form submit and onchange event. And also use reactive form with formGroup in angular 11 app.

Radio Button Angular 11 Reactive Form

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

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

Angular 11 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 - ItSolutionStuff.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 11 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 - ItSolutionStuff.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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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