This post is focused on how to call radio button change event in angular. We will look at example of angular radio button on change event example. In this article, we will implement a angular radio button change event example. you can understand a concept of angular 4 radio button click event.
You can easily get radio button selected value on change event in angular 6, angular 7, angular 8 and angular 9.
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 - HDTuto.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...
Do you like below Tutorials ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example