Angular 11 Select Dropdown with Reactive Forms Tutorial

How to create, get Select DropDown values, Validate Select DropDown, when clicked on form’s submit button in Angular 11.

In this tutorial, we are about to learn and see how to work with Angular select dropdown in reactive forms. While working on my first angular project, i gradually learned lots of small but important topics of angular.

This tutorial will make our understanding more strong about angular form with angular select box example. It will propel forward with the manifestation of coherence in angular development.

We are going to throw light on the select dropdown in angular. It will teach us to easily deal with one of the commonly asked questions about how to bind select dropdown list values in angular. The good thing is, this tutorial can also be helpful in Angular 8, Angular 9, Angular 11 mobile, and web development.

In this example tutorial, i will show you a simple example to extract the selected value, select dropdown on click, and select box change.

Install Angular CLI

This tutorial is a compendium of all the steps which helps you create the example of Angular Select DropDown with Reactive Forms example.

First and foremost step is to install an Angular app if you have already taken this step, then skip this step and jump on to the second step.

Install the latest Angular CLI with the following command:

npm install -g @angular/[email protected]

Install Angular application, and this is the important imperative that needs to be considered.

ng new angular-select-dropdown

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? 
  CSS 
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com 

Then, get inside the project folder:

cd angular-select-dropdown

Import ReactiveForms and FormsModule

Importing FormsModule and ReactiveFormsModule establishes the coherence that lets you build and work with forms in Angular.

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [...],
  imports: [
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [...],
  bootstrap: [...]
})

export class AppModule { }

Handle Select DropDown with Reactive Forms

This step tells us about how to create a select dropdown, implement validation in select dropdown and get value from select dropdown form element. Along with that we will also look at how to add dynamic values in it.

First, head over to src/app/app.component.ts and place the given below code.

import { Component } from '@angular/core';
import { FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  
  isValidated = false;

  Fruits: any = ['Apple', 'Mengo', 'Banana', 'Strawberry']

  constructor(public fb: FormBuilder) { }

  myForm = this.fb.group({
    fruits: ['', [Validators.required]]
  })

  get fruits() {
    return this.myForm.get('fruits');
  }

  changeFruit(e) {
    this.fruits.setValue(e.target.value, {
      onlySelf: true
    })
  }

  submit() {
    this.isValidated = true;
    if (!this.myForm.valid) {
      return false;
    } else {
      alert(JSON.stringify(this.myForm.value))
    }
  }

}

In the above compendium of code we have created the basic architecture and followed almost every imperative that was needed. Now We have place the following HTML code in src/app/app.component.html file.

<div class="container mt-5">

  <form [formGroup]="myForm" (ngSubmit)="submit()">
    <select class="custom-select" formControlName="fruits" (change)="changeFruit($event)">
      <option disabled>Choose Value</option>
      <option value="">Choose Fruit</option>
      <option *ngFor="let fruit of Fruits">
        {{fruit}}
      </option>
    </select>

    <div *ngIf="isValidated && fruits.errors?.required" class="alert alert-danger mt-2">
      Please choose some value
    </div>

    <button type="submit" class="btn btn-success mt-3">Submit</button>
  </form>

</div>

We have completed the tutorial, run the command to test the application.

ng serve --open

URL of the application:

http://localhost:4200

Here is the final output:

Angular 11 Select Dropdown with Reactive Forms Tutorial