Angular 9|8|7 Select Dropdown Examples with Reactive Forms

Today I’m going to share with you how to work with Angular 7 Select Dropdown. We’ll learn to work with Angular select dropdown with Reactive Forms. In this tutorial i will show you how you can create, implement and validate select dropdown in your app.

Understand SelectControlValueAccessor

The SelectControlValueAccessor is very useful directive, It is used to write select control values as well as listens to the select control changes. This directive works with the following value accessors: FormControlDirective , FormControlName , and NgModel directives.

Table of Contents

1. Angular Reactive Form Setup for Select Dropdown
2. Create Select Dropdown in Angular
3. Angular 7 Multiple Select Dropdown
4. Angular Select Dropdown Validation
5. Angular Select Option Change Event
6. Angular 7 Select Dropdown Full Example

Angular Reactive Form Setup for Select Dropdown

Inject ReactiveFormsModule in app.module.ts file to work with select dropdown in Angular app.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ]
})

app.component.html

<!-- Form starts -->
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">

   <select class="custom-select">
      <option value="" disabled>Choose your city</option>
      <option>New York</option>
   </select>

   <button type="submit">Submit</button>
</form><!-- Form ends -->

app.component.ts

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

@Component({
  // ...
})

export class AppComponent {

  constructor(public fb: FormBuilder) { }

  /*########### Form ###########*/
  registrationForm = this.fb.group({
    cityName: ['']
  })

  onSubmit() {
    alert(JSON.stringify(this.registrationForm.value))
  }

}

Click Here to read More