Angular 11/12 get selected dropdown value example. In this tutorial, you will learn how to get the selected dropdown value in angular 11/12 on form submit and change event.
As well as, this tutorial will guide you step by step on how get selected dropdown value with reactive form in angular 11 on form submit and onchange event. And also use reactive form with formGroup in angular 11 app.
Angular 12/11 Select dropdown example with Reactive Form
There are two way to get selected dropdown value on form submit and onchange event with reactive form in angular 11/12 app:
- Angular 11 Get Selected DropDown Value On Form Submit
- Angular 11 Get Selected DropDown Value On OnChange Event
Angular 11 Get Selected DropDown Value On Form Submit
Step 1 – Import Module
Then, 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
In this step, create simple reactive form with a dropdown value with input field element. So, visit src/app/app.component.html and update the following code into it:
<div class="container">
<h1>Angular Select Dropdown Example - geeksforgeeks.org</h1>
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<label for="website">Website:</label>
<select formControlName="website" class="form-control">
<option disabled>Select Website</option>
<option>Choose Website</option>
<option *ngFor="let web of websiteList">{{web}}</option>
</select>
<div *ngIf="f.website.touched && f.website.invalid" class="alert alert-danger">
<div *ngIf="f.website.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
In this step, visit the 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 {
websiteList: any = ['geeksforgeeks.org', 'abc.com', 'w3alert.com']
form = new FormGroup({
website: new FormControl('', Validators.required)
});
get f(){
return this.form.controls;
}
submit(){
console.log(this.form.value);
}
}
Angular 11 Get Selected DropDown Value On OnChange Event
Step 1 – Import Module
Then, 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
In this step, create simple reactive form with a dropdown value with input field element. So, visit src/app/app.component.html and update the following code into it:
<div class="container">
<h1>Angular Select Dropdown Example - Tutsmake.com</h1>
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<label for="website">Website:</label>
<select formControlName="website" class="form-control" (change)="changeWebsite($event)">
<option disabled>Select Website</option>
<option>Choose Website</option>
<option *ngFor="let web of websiteList">{{web}}</option>
</select>
<div *ngIf="f.website.touched && f.website.invalid" class="alert alert-danger">
<div *ngIf="f.website.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
In this step, visit the 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 {
websiteList: any = ['w3school.com', 'geeksforgeeks.org', 'abc.com']
form = new FormGroup({
website: new FormControl('', Validators.required)
});
get f(){
return this.form.controls;
}
submit(){
console.log(this.form.value);
}
changeWebsite(e) {
console.log(e.target.value);
}
}
Start Angular App
In this step, execute the following command on terminal to start angular app:
ng serve
Recommended Angular Tutorials
