Form support in Angular DropDownList component

27 Sep 20256 minutes to read

The DropDownList component supports both template-driven and reactive forms, which are the two primary form-building technologies in Angular.

Template-Driven Forms

Template-driven forms use directives in the component template to build and manage form controls. To use this approach, import the FormsModule into the application’s root NgModule.

For more details, refer to the official Angular guide on Template-Driven Forms.

To integrate the DropDownList into a template-driven form, set the name attribute to uniquely identify the control. Then, use the [(ngModel)] directive for two-way data binding. This registers the DropDownList with ngForm, and its selected value will be synchronized with the model property bound to ngModel.

The following example demonstrates how to achieve two-way data binding in a template-driven form.

app.component.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'

@Component({
imports: [
        FormsModule, ReactiveFormsModule, DropDownListModule, ButtonModule, CommonModule
    ],


standalone: true,
    selector: 'app-root',
    templateUrl: 'form-support.html'
})
export class AppComponent {
    // defined the array of data
    public skillset: string[] = [
        'ASP.NET', 'ActionScript', 'Basic',
        'C++' , 'C#' , 'dBase' , 'Delphi' ,
        'ESPOL' , 'F#' , 'FoxPro' , 'Java',
        'J#' , 'Lisp' , 'Logo' , 'PHP'
    ];
    public placeholder: String = 'e.g: ActionScript';

    constructor() {
    }
        skillForm = {
            skillname: null,
            sname: '',
            smail: ''
        };
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Reactive Forms

Reactive forms use a model-driven technique to handle form data between the component and its template. This approach is also known as model-driven forms because it involves creating a form control model in the component class. This model listens for data changes and returns the values and validation status of the form controls.

For more details, refer to the official Angular guide on Reactive Forms.

To use reactive forms, import the ReactiveFormsModule into the application’s root NgModule. In the component file, import FormGroup and FormControl from @angular/forms. The FormGroup provides a wrapper for a collection of form controls, while FormControl tracks the value and validation status of an individual control.

Assign a formControlName to the DropDownList element in the template. In the component class, define a FormGroup and a FormControl for the DropDownList. The FormControl’s initial value will serve as the default value for the DropDownList.

The following example demonstrates how to use the DropDownList component within a reactive form.

app.component.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common'

@Component({
imports: [
        FormsModule, ReactiveFormsModule, DropDownListModule, ButtonModule, CommonModule
    ],


standalone: true,
    selector: 'app-root',
    templateUrl: 'reactive-form.html'
})
export class AppComponent {
    // defined the array of data
    public skillset: string[] = [
        'ASP.NET', 'ActionScript', 'Basic',
        'C++' , 'C#' , 'dBase' , 'Delphi' ,
        'ESPOL' , 'F#' , 'FoxPro' , 'Java',
        'J#' , 'Lisp' , 'Logo' , 'PHP'
    ];
    public placeholder: String = 'e.g: ActionScript';
    skillForm?: FormGroup| any;
    fb: FormBuilder;
    constructor(@Inject(FormBuilder) private builder: FormBuilder) {
        this.fb = builder;
        this.createForm();
    }
    createForm() {
        this.skillForm = this.fb.group({
            skillname: ['', Validators.required],
            sname: ['', Validators.required],
            smail: ['', Validators.required]
        });
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));