How to Validate Angular Material Radio Button In Reactive Form

In this tutorial, you’ll learn how to validate the Angular Material Radio button group in Reactive Forms. Let’s get started by installing Angular Material and setting up it in an Angular project.

Source code from this tutorial can be found on GitHub.

Once you have Angular Material all set up, let’s include the MatRadioModule in the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { MatRadioModule } from '@angular/material/radio';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatButtonModule } from '@angular/material/button';
import { MatListModule} from '@angular/material/list';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatCardModule,
    MatButtonModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatListModule,
    MatRadioModule  
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Let’s add the material radio button group to the app.component.html file.

<form [formGroup]="profileForm" #ngForm="ngForm" class="form-container">
  <mat-card>
    <mat-card-header>
      <mat-card-title>
        Profile Information <span *ngIf="ngForm.submitted &amp;&amp; !profileForm.valid" class="small-font"
          [ngClass]="{'invalid': ngForm.submitted }">* required</span>
      </mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <div class="row">
        <div class="col-md-6">
          <mat-form-field class="full-width">
            <input formcontrolname="firstName" matinput="" placeholder="First name">
          </mat-form-field>
        </div>
        <div class="col-md-6">
          <mat-form-field class="full-width">
            <input formcontrolname="lastName" matinput="" placeholder="Last name">
          </mat-form-field>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <mat-form-field class="full-width">
            <textarea formcontrolname="address" matinput="" placeholder="Address"></textarea>
          </mat-form-field>
        </div>
        <div class="col-md-6 top-padding">
          <mat-form-field class="full-width" appearance="fill">
            <mat-label>Select DOB</mat-label>
            <input formControlName="dob" matInput [matDatepicker]="picker">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <mat-radio-group formcontrolname="gender" class="margin-left">
            <mat-radio-button value="male"> Male </mat-radio-button>
            <mat-radio-button value="female"> Female </mat-radio-button>
          </mat-radio-group>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions>
      <button (click)="saveForm()" mat-raised-button color="primary">Save</button>
    </mat-card-actions>
  </mat-card>
</form>

I already have a reactive form defined in the app.component.ts file.

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 {
  constructor(private formBuilder: FormBuilder) { }

  profileForm = this.formBuilder.group({
    firstName: ['', [Validators.required]],
    lastName: ['', [Validators.required]],
    address: ['', [Validators.required]],
    dob: ['', [Validators.required]],
    gender: ['', [Validators.required]]
  });

  saveForm() {
    if (this.profileForm.valid) {
      console.log('Profile form data :: ', this.profileForm.value);
    }
  }

}

Validating Material Radio Button

For validating the Material radio button, we’ll add a class dynamically to the radio button group.

[ngClass]="{'invalid': ngForm.submitted && profileForm.get('gender').invalid}"

The class will be added once, the form is submitted and the radio button value is invalid or not selected.

<mat-radio-group [ngClass]="{'invalid': ngForm.submitted && profileForm.get('gender').invalid}"
  formControlName="gender" class="margin-left">
   Male 
   Female 
</mat-radio-group>

NgForm directive helps in detecting whether the form is submitted. Using the reactive form profileForm you can check whether it’s valid.

Add a class for invalid in app.component.css.

.invalid{
    color:#f44336;
}

Save the changes and you will have the radio button validation working on click of the Save button.

Source code from this tutorial can be found on GitHub.