Hello Devs,

In this tutorial, we are going to see example of angular 10 select box.

Given below are two examples to get value of selected select box by click on submit button and another get select dropdown box value in on change value.

Follow this step by step guide given below:




Example 1:

 Get Selected DropDown Value on Form Submit

Import FormsModule src/app/app.module.ts

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 { }



Form with ngModel src/app/app.component.html

<div class="container">

    <h1>Angular Select Dropdown Example - Rathorji.in</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>



updated Ts File src/app/app.component.ts

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 = ['HDTuto.com', 'HDTuto.com', 'Nicesnippets.com']

  

  form = new FormGroup({

    website: new FormControl('', Validators.required)

  });

  

  get f(){

    return this.form.controls;

  }

  

  submit(){

    console.log(this.form.value);

  }

  

}


Run this command:

ng serve



Example 2: 

Get Selected DropDown Value on Change Event

Import FormsModule src/app/app.module.ts

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 { }



Form with ngModel src/app/app.component.html

<div class="container">

    <h1>Angular Select Dropdown Example - Rathorji.in</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>



updated Ts File src/app/app.component.ts

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 = ['HDTuto.com', 'HDTuto.com', 'Nicesnippets.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);

  }

  

}


Run this command:

ng serve


I hope this example helps you.