Angular 8/9 Radio Buttons Tutorial with Examples

By Digamber Rawat Last updated on
Angular 8/9 Radio Buttons tutorial with examples is going to be discussed in this tutorial. We will learn to set and get values from Radio buttons using Reactive forms & Template-driven form.

Setup Angular App

Run the given below command to set up a basic Angular project.

ng new angular-radio-buttons-demo-reactive

# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? SCSS

Get into the project directory.

cd angular-radio-buttons-demo-reactive

Import ReactiveFormsModule and FormsModule in App Module

For making the radio buttons work with Reactive forms and Template-driven form we must import the given below forms services in app.module.ts file.

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [...],
  imports: [
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [...],
  bootstrap: [...]
})

export class AppModule { }

Radio Buttons Example with Reactive Forms

In this part of the tutorial, I will share with you how you can manage radio buttons in Angular 8/9 with Reactive forms.

  • Implement Radio Buttons
  • Set the initial value or selected value with Reactive forms
  • Validate radio buttons with Angular 8

Go to app.component.html file and add the following code.

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
   <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>

   <button type="submit">Submit</button>
</form>

Go to app.component.ts file and add the given below code:

import { Component } from '@angular/core';
import { FormBuilder } from "@angular/forms";

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

export class AppComponent {
  isSubmitted = false;

  constructor(public fb: FormBuilder) { }

  registrationForm = this.fb.group({
    gender: ['']
  })

  get myForm() {
    return this.registrationForm.get('gender');
  }

  onSubmit() {
    this.isSubmitted = true;
    if (!this.registrationForm.valid) {
      return false;
    } else {
      alert(JSON.stringify(this.registrationForm.value))
    }
  }
}

Radio Buttons Selected State with Angular 8/9 Reactive Forms

To set selected state of radio buttons in Angular 8/9 we need to pass the radio button’s value to the formcontrol array like given below.

registrationForm = this.fb.group({
  gender: ['male', [Validators.required]]
})

Validate Radio Buttons with Reactive Forms

To validate radio buttons in Angular 8/9 we need to import the Validators service from @angular/forms. Then inject the Validators service in radio button’s form control array and access the validation method like given below.

import { FormBuilder, Validators } from "@angular/forms";

registrationForm = this.fb.group({
  gender: ['male', [Validators.required]]
})

Go to app.component.html and show the error in app’s front-end.

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
   <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="isSubmitted && myForm.invalid">
       Please select either value
   </div>

   <button type="submit">Submit</button>
</form>

Angular 9 Radio Buttons Example with Template Driven Form

Since we all know forms are the backbone of any web and mobile app. Forms are used to sign-in, place an order, flight booking, arrange a meeting, and many more data entry work. In this part of the tutorial we are gong to work with Radio Buttons with Template Driven Form.

Go to the app.component.html template and add the below code to create the template driven form structure.

<form #myForm="ngForm" (submit)="templateForm(myForm.value)" novalidate>
  <div>
     <input id="male" type="radio" value="male" name="gender" ngModel>
     <label class="custom-control-label" for="male">Male</label>
  </div>

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

  <button type="submit">Find out gender</button>
</form>

The go to your app.component.ts file and add the following code.

import {FormsModule} from '@angular/forms';

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

export class AppComponent {
  templateForm(value: any) {
    alert(JSON.stringify(value));
  }
}

Radio Buttons Validation with Angular Template-driven Form

To validate radio buttons with Angular template-driven form we need to follow the given below process.

app.component.html

<form #myForm="ngForm" (submit)="templateForm(myForm.value)" novalidate>
  <div>
     <input id="male" type="radio" value="male" name="gender" ngModel>
     <label class="custom-control-label" for="male">Male</label>
  </div>

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

   <div *ngIf="isSubmitted && myForm.invalid">
      <p>Please select either value</p>
   </div>

  <button type="submit">Find out gender</button>
</form>

app.component.ts

import {FormsModule} from '@angular/forms';

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

export class AppComponent {
  isSubmitted = false;

  templateForm(value: any) {
    alert(JSON.stringify(value));
  }

  submitForm(form: NgForm) {
    this.isSubmitted = true;
      if(!form.valid) {
        return false;
      } else {
        alert(JSON.stringify(form.value))
      }
   }

}

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.