Angular Radio Button On Change Event Example

By Hardik Savani | March 16, 2020 | Category : Angular


This tutorial will provide example of angular radio button change event example. you can see angular 4 radio button click event. you will learn angular radio button selected event. we will help you to give example of how to call radio button change event in angular. You just need to some step to done angular radio button on change event example.

You can easily get radio button selected value on change event in angular 6, angular 7, angular 8, angular 9 and angular 10.

Here, i will give you very simple example to getting selected radio button value by change event with reactive form. here we will take gender radio button with Male and Female radio button and if you select anyone then it will by print console selected value on change event. we created changeGender() that will call on change of radio button value. so let's see app.component.html and app.component.ts file bellow.

So, let's see example

src/app/app.component.html

<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>

src/app/app.component.ts

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);

}

}

Output:

Male

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: