Angular 14 Select Dropdown Example

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:

1. Angular 14 Get Selected DropDown Value On Form Submit
2. 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 - tutsmake.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

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 = ['tutsmake.com', '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', 'tutsmake.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

In this step, execute the following command on terminal to start angular app:

ng serve

Recommended Angular Tutorials