Angular 12 gets selected material radio button value example; In this tutorial, i am going to show you how to get the selected material radio button value in angular 12 on form submit and change event.
A radio button is an element of the graphical user interface (GUI) which allows a user to select a single item from a predefined list of options. Radio buttons allow the user to select one option from a set. You should use radio buttons for optional sets that are mutually exclusive if you think that the user needs to see all available options side-by-side.
How to Get Selected Radio Button Value in Angular 12
- Angular Get Selected Radio Button Value On Form Submit
- Angular Get Selected Radio Button Value On OnChange Event
Angular Get Selected Radio Button Value On Form Submit
Step 1 – Import Module
Open app.module.ts file and import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file like following:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 2 – Add Code on View File
Create reactive form with a radio button input field element. So, visit src/app/app.component.html and update the following code into it:
<div class="container"> <h1>Angular Radio Button Example - laratutorials.com</h1> <form [formGroup]="form" (ngSubmit)="submit()"> <div class="form-group"> <label for="gender">Gender:</label> <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="f.gender.touched && f.gender.invalid" class="alert alert-danger"> <div *ngIf="f.gender.errors.required">Name is required.</div> </div> </div> <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button> </form> </div>
Step 3 – Use Component ts File
Go to src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:
import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { form = new FormGroup({ gender: new FormControl('', Validators.required) }); get f(){ return this.form.controls; } submit(){ console.log(this.form.value); } }
Angular Get Selected Radio Button Value On OnChange Event
Step 1 – Import Module
Open app.module.ts file and import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file like following:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 2 – Add Code on View File
Create reactive form with a radio button input field element. So, visit src/app/app.component.html and update the following code into it:
<div class="container"> <h1>Angular Radio Button Example - ItSolutionStuff.com</h1> <form [formGroup]="form" (ngSubmit)="submit()"> <div class="form-group"> <label for="gender">Gender:</label> <div> <input id="male" type="radio" value="male" name="gender" formControlName="gender" (change)="changeGender($event)"> <label for="male">Male</label> </div> <div> <input id="female" type="radio" value="female" name="gender" formControlName="gender" (change)="changeGender($event)"> <label for="female">Female</label> </div> <div *ngIf="f.gender.touched && f.gender.invalid" class="alert alert-danger"> <div *ngIf="f.gender.errors.required">Name is required.</div> </div> </div> <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button> </form> </div>
Step 3 – Use Component ts File
Go to src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:
import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { form = new FormGroup({ gender: new FormControl('', Validators.required) }); get f(){ return this.form.controls; } submit(){ console.log(this.form.value); } changeGender(e) { console.log(e.target.value); } }
Start Angular App
Execute the following command on terminal to start angular app:
ng serve