Angular 15/14 Select Dropdown Tutorial with Example

Angular 15/14 get a selected dropdown value; Through this tutorial, i am going to show you how to get the selected dropdown value in Angular 15/14 apps on form submit and change event.

Angular 15/14 Select Dropdown Tutorial with Example

There are two simple solution to get selected dropdown value on form submit and onchange event with reactive form in Angular 15/14 app:

1. Angular 15/14 Get Selected DropDown Value On Form Submit
2. Angular 15/14 Get Selected DropDown Value On OnChange Event

Angular 15/14 Get Selected DropDown Value On Form Submit

• 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

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 - Laratutorials.com</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

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 {
  websiteList: any = ['laratutorials.com', 'abc.com', 'sssf.com']
  
  form = new FormGroup({
    website: new FormControl('', Validators.required)
  });
  
  get f(){
    return this.form.controls;
  }
  
  submit(){
    console.log(this.form.value);
  }
  
}

Angular 15/14 Get Selected DropDown Value On OnChange Event

• 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

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

Go to 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', 'lara.com', '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

Run the following command on terminal to start angular app:

ng serve

Related Tutorials