In this article, we will learn about how we can bind the Drop-Down List in Angular and how to apply the required validation on it.
A Drop-Down List is a graphical control element, that allows the user to choose one value from a list. When a Drop-Down List is activated, it displays a list of values, from which the user may select one. When inactive, it displays a single value.
Prerequisites:
- Basic knowledge of Angular
- Code editor like Visual Studio Code
Create a new Angular project by typing the following command in the VSCode terminal.
ng new bind-dropdownlist
Open the app.component.ts file and add the code in it.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Bind DropDownList'; products = [ { id: 1, name: 'Smartphone' }, { id: 2, name: 'Headphone' }, { id: 3, name: 'Bike' }, { id: 4, name: 'Laptop' }, { id: 5, name: 'TV' }, { id: 6, name: 'PC' }, { id: 7, name: 'Car' } ]; }
Open the app.component.html file and add the HTML in it.
<h1>{{title}}</h1> <select> <option *ngFor="let product of products" [value]="product.id"> {{product.name}} </option> </select>
Output:
Now please click the link given below and follow the steps to add Bootstrap 4 to Angular app for better and responsive design.
Add Bootstrap 4, jQuery and Font Awesome To Angular
Note: You must have to add jQuery because Bootstrap uses jQuery for JavaScript plugins.
Here, we are going to add the required field validation on the drop-down list.
Open the app.module.ts file then add the FormsModule in the file.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {FormsModule} from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Open the app.component.ts file and add the code in it.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Bind DropDownList'; ddlProduct = ""; products = [ { id: 1, name: 'Smartphone' }, { id: 2, name: 'Headphone' }, { id: 3, name: 'Bike' }, { id: 4, name: 'Laptop' }, { id: 5, name: 'TV' }, { id: 6, name: 'PC' }, { id: 7, name: 'Car' } ]; onSubmit() { alert('Product ID: ' + this.ddlProduct); } }
Now, just open the app.component.html and replace it with HTML given below.
<div class="container w-50"> <h1>{{title}}</h1> <form name="form" (ngSubmit)="form.valid && onSubmit()" #form="ngForm"> <div class="form-group"> <label for="product">Product List</label> <!-- DropDownList --> <select class="custom-select" name="product" [(ngModel)]="ddlProduct" #product="ngModel" [ngClass]="{ 'is-invalid': form.submitted && product.invalid }" required> <option value="" class="text-primary font-weight-bolder"> --- Select Product --- </option> <option *ngFor="let product of products" [value]="product.id"> {{product.name}} </option> </select> <!-- Required Validation Message --> <div *ngIf="form.submitted && product.invalid" class="text-danger"> <h6 *ngIf="product.errors.required">Product is Required</h6> </div> </div> <button class="btn btn-primary">Submit</button> </form> </div>
That’s it.
Output:
Also, check Custom Searching In Angular
really very useful for beginners
Thanks for your review 🙂