Angular Radio Buttons | Angular 7|8|9 Radio Buttons Example

In this Angular tutorial, I am going to show you how to work with Angular Radio Buttons. Since, Angular offers two type of forms, I’ll teach you how to implement radio buttons Angular in a Template-Driven and Reactive Forms respectively.

We’ll start with Template-Driven Form it is based on NgModel and NgForm directive. Whereas reactive form takes help of FormBuilder and FormControl classes to manage form elements.

Working with Radio Buttons in Template-driven Form in Angular

Before working with radio buttons in template-driven form, we need to activate FormsModule service in angular app. This service allows you to work with template-driven form in Angular. Go to app.module.ts file and paste the following code.

import {FormsModule} from '@angular/forms';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ]
})

Implementing Radio Buttons in Angular Template Driven Form
We are going to create radio buttons in Angular template. We’ll use ngModel directive, this directive communicates with NgForm directive.

<form #myForm="ngForm" (submit)="templateForm(myForm.value)" novalidate>
   <div class="custom-control custom-radio">
      <input id="male" type="radio" class="custom-control-input" value="male" name="gender" ngModel>
      <label class="custom-control-label" for="male">Male</label>
   </div>
   <div class="custom-control custom-radio">
      <input id="female" type="radio" class="custom-control-input" value="female" name="gender" ngModel>
      <label class="custom-control-label" for="female">Female</label>
   </div>
   <button type="submit" class="btn btn-danger btn-lg btn-block">Find out gender</button>
</form>

Getting Radio Buttons Value in Angular Component Class

import { Component } from '@angular/core';
import {FormsModule} from '@angular/forms';
@Component({
 // ...
})
export class AppComponent {

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

Template-driven Radio Buttons Validation in Angular 7

In order to implement Angular vlidation on radio buttons, use the following code.
app.component.html

<form #myForm="ngForm" (submit)="submitForm(myForm)" novalidate>
   <!-- Gender -->
   <div>
      <input id="male" type="radio" class="custom-control-input" value="male" name="gender" ngModel required>
      <label class="custom-control-label" for="male">Male</label>
   </div>
   <div>
      <input id="female" type="radio" class="custom-control-input" value="female" name="gender" ngModel required>
      <label class="custom-control-label" for="female">Female</label>
   </div>
   <div *ngIf="isSubmitted && myForm.invalid">
      <p>Please select either value</p>
   </div>
   <!-- Submit Button -->
   <button type="submit" class="btn btn-danger btn-lg btn-block">Find out gender</button>
</form>

app.component.ts

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isSubmitted = false;
  constructor() {
  }
  submitForm(form: NgForm) {
    this.isSubmitted = true;
    if(!form.valid) {
      return false;
    } else {
    alert(JSON.stringify(form.value))
    }
  }
}

Demo radio buttons example Online