Form support in Angular MultiSelect component

26 Aug 20255 minutes to read

The MultiSelect component supports both reactive and template-driven form-building technologies, enabling seamless integration with Angular’s form handling mechanisms.

Template-Driven Forms

Template-driven forms use ng directives in the view to handle form controls.
To enable template-driven forms, import the FormsModule into the corresponding app component.

For more details about template-driven forms, refer to: https://angular.io/guide/forms#template-driven-forms.

Add the name attribute to the MultiSelect element to identify the form element. To register a MultiSelect element with ngForm, provide the ngModel directive so the FormsModule automatically detects the MultiSelect as a form element. The MultiSelect value will be selected based on the ngModel value, enabling two-way data binding.

The following example demonstrates how to achieve two-way data binding:

app.component.ts

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

@Component({
    imports: [
        FormsModule, ReactiveFormsModule, MultiSelectModule, 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 the reactive model-driven technique to handle form data between component and view, also called model-driven forms. This approach listens to form data changes between the app component and view, returning the valid states and values of form elements.

For more details about reactive forms, refer to: https://angular.io/guide/reactive-forms.

For reactive forms, import ReactiveFormsModule and Additionally, import FormGroup and FormControl into the app component. FormGroup declares the formGroupName for the form, and FormControl declares the formControlName for form controls.
Declare the formControlName for the MultiSelect as usual, then create a value object for the FormGroup where each value represents the default value of the form control.

The following example demonstrates how to use reactive forms:

app.component.ts

import { FormsModule, ReactiveFormsModule, FormGroup, FormBuilder, Validators } from '@angular/forms'
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { CommonModule } from '@angular/common'
import { Component, Inject } from '@angular/core';
@Component({
    imports: [CommonModule,
        FormsModule, ReactiveFormsModule, MultiSelectModule, ButtonModule,
    ],
    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';
    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));