Angular 14 get a selected dropdown value. In this tutorial, we will learn how to get the selected dropdown value in angular 14 apps 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 on form submit and onchange event. And also use reactive form with formGroup in angular 14 apps.
Angular 14 Select Dropdown Example
There are two way to get selected dropdown value on form submit and onchange event with reactive form in angular 14 app:
- Angular 14 Get Selected DropDown Value On Form Submit
- Angular 14 Get Selected DropDown Value On OnChange Event
Angular 14 Get Selected DropDown Value On Form Submit
Let’s use the following steps to get selected dropdown value on form submit in angular apps:
- Step 1 – Import Module
- Step 2 – Create DropDown on View File
- Step 3 – Use Component ts File
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 – Create DropDown 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 && 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 14 Get Selected DropDown Value On OnChange Event
Let’s use the following steps to get the selected dropdown value on on change event in angular apps:
- Step 1 – Import Module
- Step 2 – Create DropDown on View File
- Step 3 – Use Component ts File
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 – Create DropDown 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
