In this section, we will learn how to select dropdown in Angular 8 or Angular 9. For this, we will provide a very simple example to select dropdown in Angular 8 or Angular 9. The Angular 9/8 contains a list of bind select dropdowns. We will start by change event of dropdown selection.
In order to create a reactive form that will contain a dropdown box, we will use the loop. In this section, we will provide two examples to select dropdown. In the first example, when we click on the submit button, we are able to get the value of selected dropdown box. In the second example, when the change event has occurred, we are able to get the value of selected dropdown box. In our both example, we will create dropdown by using the “websiteList” variable. Both the examples to get dropdown are described below. For this, firstly, we have to add from validation, and for that, we will follow some step in Angular 9, which is described as follows:
Example 1: Get Selected DropDown value on Form Submit
Step 1:
In this step, we will Import FormsModule. If we are trying to use the Angular app to create form, we require to import FormsModule. We will import this from @angular/forms library. So we will use the app.module.ts file and add the following code:
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:
In the second step, we will perform Form with ngModel. For this, we will use html form and write code into it with ngModel. So we will use the file app.component.html to add the below code. In our form, we will use the bootstrap class.
src/app/app.component.html:
<div class="container">
<h1> Example of Select Dropdown in Angular </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>
Step 3:
In this step, we will Update Ts file. For this, we will write a function named submit(), and after that, we are able to get all the values of input fields. So we will use the app.component.ts file to add the below code:
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 = ['Javatpoint.com', 'HDTuto.com', 'Tutorialandexample.com]
form = new FormGroup({
website: new FormControl('', Validators.required)
});
get f(){
return this.form.controls;
}
submit(){
console.log(this.form.value);
}
}
Now, we will use the following command to run the above example:
ng serve Example 2: Get Selected DropDown value on Change Event
Step 1:
In this step, we will Import FormsModule. If we are trying to use the Angular app to create form, we require to import FormsModule. We will import this from @angular/forms library. So we will use the app.module.ts file and add the following code:
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 { }
Step 2:
In the second step, we will perform Form with ngModel. For this, we will use html form and write code into it with ngModel. So we will use the file app.component.html to add the below code. In our form, we will use the bootstrap classes.
<div class="container">
<h1> Example of Select Dropdown in Angular </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:
In this step, we will Update Ts file. For this, we will write a function named submit(), and after that, we are able to get all the values of input fields. So we will use the app.component.ts file to add the below code:
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 = ['Javatpoint.com', 'HDTuto.com', 'Tutorialandexample.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);
}
}
Now we will use the following command to run the above example
ng serve
Leave a Reply