Radio Buttons Reactive Forms with Angular 7|8|9

Now I am going to build radio buttons using Angular reactive forms. I will show you how to implement, set selected value and validate radio buttons in Angular app. I’ll use Reactive Form’s FormBuilder, FormControl, and ReactiveFormsModule service to handle radio buttons.

Go to app.module.ts file and paste the following code.
FormBuilder: It allows to build an AbstractControl from a user-specified configuration..
FormGroup: FormGroup service maintains the values, properties and validation state of a specific group of AbstractControl.
FormControl: This service manages the value and validation status of a specific form control.
ngSubmit: It’s an event which triggers when the form is submit button is clicked.

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

Integrating Radio Buttons in Reactive Forms
Now i will show you how to integrate Radio Buttons in Reactive forms. Let’s understand the Reactive Form’s services:
app.component.html

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
   <!-- Gender -->
   <div>
      <input id="male" type="radio" class="custom-control-input" value="male" name="gender" formControlName="gender">
      <label class="custom-control-label" for="male">Male</label>
   </div>
   <div>
      <input id="female" type="radio" class="custom-control-input" value="female" name="gender" formControlName="gender">
      <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">Submit</button>
</form>

app.component.ts 

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 {
  constructor(public fb: FormBuilder) {  }
  registrationForm = this.fb.group({    gender: ['male']  })
  // Submit Registration Form  onSubmit() {      alert(JSON.stringify(this.registrationForm.value))  }  
}

Radio Buttons Validation with Reactive Forms

In order to validate radio buttons using reactive forms, we need to take help of getter methods. Getter method allow us to access form control element.

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

Access errors within Angular template using getters

 <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
   <div>
      <input id="male" type="radio" value="male" name="gender" formControlName="gender">
      <label class="custom-control-label" for="male">Male</label>
   </div>
   <div>
      <input id="female" type="radio" value="female" name="gender" formControlName="gender">
      <label class="custom-control-label" for="female">Female</label>
   </div>
   <!-- Showing error method -->
   <div *ngIf="isSubmitted && myForm.errors?.required">
      <p>Please select either value</p>
   </div>
 
   <button type="submit">Submit</button>
</form>

Below is the complete logic of radio buttons in Angular 7

import { Component } from '@angular/core';
import { FormBuilder, Validators } 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: ['', [Validators.required]]
  })
  get myForm() {
    return this.registrationForm.get('gender');
  }
  onSubmit() {
    this.isSubmitted = true;
    if(!this.registrationForm.valid) {
      return false;
    } else {
      alert(JSON.stringify(this.registrationForm.value))
    }
  }
}

Set Radio Button Selected in Angular

 To set the Radio Button selected in Angular, we will pass the radio button’s value in the from control array like given below. It will set selected value of radio button in Angular’s Reactive Forms.

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

Demo Radio Buttons Reactive Forms with Angular 7|8|9 online: