Angular 13 Select Dropdown Tutorial with Example

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

Angular 13 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 13 app:

  1. Angular 13 Get Selected DropDown Value On Form Submit
  2. Angular 13 Get Selected DropDown Value On OnChange Event

Angular 13 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 = ['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 13 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', '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

Run the following command on terminal to start angular app:

ng serve

Be First to Comment

Leave a Reply

Your email address will not be published.