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.

        Profile Information * required
      
    
    
      
        
          
            
          
        
        
          
            
          
        
      
      
        
          
            
          
        
        
          
            Select DOB
            
            
            
          
        
      
      
        
          
             Male 
             Female 
          
        
      
    
    
      Save

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.

   Male 
   Female 

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.