Search results

Form Support

The MultiSelect supports both the reactive and template-driven form-building technologies.

Template-Driven Forms

The template-drive forms uses the ng directives in view to handle the forms controls. To enable the template-driven, import the FormsModule into corresponding app component.

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

Mention the name attribute to MultiSelect element which will be used to identify the form element. To register an MultiSelect element to ngForm, give the ngModel to it so the FormsModule will automatically detect the MultiSelect as a form element. After that, the MultiSelect value will be selected based on the ngModel value.

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

Source
Preview
app.component.ts
app.module.ts
main.ts
form-support.html
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

@Component({
    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: ''
        };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule
    ],
    declarations: [AppComponent, MultiSelectComponent, ButtonComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Angular MultiSelect</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <!-- Here we have used CDN links for our preview purpose  -->
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js@2.6.5/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div class="row" style="width:500px;">
        <div class="col-xs-7 col-sm-7 col-lg-7 col-md-7" style="padding-top:20px;">
            <div style="webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
       box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
       margin:0 auto;height:auto">
                <div style="padding:30px;">
                    <form #form="ngForm">
                        <div class="form-group">
                            <ejs-multiselect name="skillname" #book='ngModel' [(ngModel)]='skillForm.skillname'
                                [dataSource]='skillset' [placeholder]='placeholder'>
                            </ejs-multiselect>
                            <div *ngIf="book.invalid && (book.dirty || book.touched)" class="alert alert-danger">
                                <div *ngIf="book.errors.required">
                                    BookName is required.
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="padding-top:10px;">
                            <div class="e-float-input">
                                <input type="text" required #sname='ngModel' [(ngModel)]="skillForm.sname" name="sname"
                                    maxlength="10" />
                                <span class="e-float-line e-label-top"></span>
                                <label class="e-float-text e-label-top">Name:</label>
                                <div *ngIf="sname.invalid && (sname.dirty || sname.touched)" class="alert alert-danger">
                                    <div *ngIf="sname.errors.required">
                                        Name is required.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="padding-top:10px;">
                            <div class="e-float-input">
                                <input type="text" required #smail='ngModel' [(ngModel)]="skillForm.smail" name="smail"
                                    maxlength="15" />
                                <span class="e-float-line e-label-top"></span>
                                <label class="e-float-text e-label-top">Email:</label>
                                <div *ngIf="smail.invalid && (smail.dirty || smail.touched)" class="alert alert-danger">
                                    <div *ngIf="smail.errors.required">
                                        Email is required.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="padding:10px;">
                            <button ejs-button [disabled]="!form.valid">Done</button>
                            <button ejs-button type="reset"
                                [disabled]="!(book.valid || sname.valid || smail.valid)">Reset</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-xs-5 col-sm-5 col-lg-5 col-md-5" style="padding-top:20px;">
            <div style="webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
       box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
       margin:0 auto;height:330px;">
                <div style="padding:30px;">
                    <div class="form-group">
                        <span style="font-weight:800;">Selected Language: </span>
                        <span style="font-style:oblique;color:#8a2be2;">
                            {{ skillForm.skillname }}</span>
                    </div>
                    <div class="form-group" style="padding-top:50px;">
                        <span style="font-weight:800;">Buyer Name: </span>
                        <span style="font-style:oblique;color:#8a2be2;">
                            {{ skillForm.sname }}</span>
                    </div>
                    <div class="form-group" style="padding-top:50px;">
                        <span style="font-weight:800;">Buyer Mail ID: </span>
                        <span style="font-style:oblique;color:#8a2be2;">
                            {{ skillForm.smail }}</span>
                    </div>
                </div>
            </div>
        </div>
        <link href='https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css' rel='stylesheet' />
    </div>
</body>

</html>

Reactive Forms

The reactive forms uses the reactive model-driven technique to handle form data between component and view, due to that we also call it as the model-driven forms. It’s listen the form data changes between App component and view also returns the valid states and values of form elements.

For more details about Reactive Forms refer: https://angular.io/guide/reactive-forms.

For the reactive forms you should import a ReactiveFormsModule into app module as well as the FormGroup,FormControl should be imported to app component. The FormGroup is used to declare formGroupName for the form and the FormControl is used to declare formControlName for form controls. You can declare the formControlName to MultiSelect as usual. then,you must create a value object to the FormGroup and each value will be the default value of the form control.

The following example demonstrates how to use the reactive forms.

Source
Preview
app.component.ts
app.module.ts
main.ts
form-support.html
import { Component, OnInit, Inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

@Component({
    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;
    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]
        });
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule
    ],
    declarations: [AppComponent, MultiSelectComponent, ButtonComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Angular MultiSelect</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <!-- Here we have used CDN links for our preview purpose  -->
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://unpkg.com/core-js@2.6.5/client/shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div class="row" style="width:500px;">
        <div class="col-xs-7 col-sm-7 col-lg-7 col-md-7" style="padding-top:20px;">
            <div style="webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
       box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
       margin:0 auto;height:auto">
                <div style="padding:30px;">
                    <form [formGroup]="skillForm" novalidate id="formId">
                        <div class="form-group">
                            <ejs-multiselect formControlName="skillname" name="skillname" [dataSource]='skillset'
                                [placeholder]='placeholder'>
                            </ejs-multiselect>
                            <div *ngIf="skillForm.controls.skillname.invalid && (skillForm.controls.skillname.dirty ||skillForm.controls.skillname.touched)"
                                class="alert alert-danger">
                                <div *ngIf="skillForm.controls.skillname.errors.required">
                                    BookName is required.
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="padding-top:10px;">
                            <div class="e-float-input">
                                <input type="text" formControlName="sname" name="sname" maxlength="10" />
                                <span class="e-float-line e-label-top"></span>
                                <label class="e-float-text e-label-top">Name:</label>
                                <div *ngIf="skillForm.controls.sname.invalid && (skillForm.controls.sname.dirty || skillForm.controls.sname.touched)"
                                    class="alert alert-danger">
                                    <div *ngIf="skillForm.controls.sname.errors.required">
                                        Name is required.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="padding-top:10px;">
                            <div class="e-float-input">
                                <input type="text" formControlName="smail" name="smail" maxlength="15" />
                                <span class="e-float-line e-label-top"></span>
                                <label class="e-float-text e-label-top">Email:</label>
                                <div *ngIf="skillForm.controls.smail.invalid && (skillForm.controls.smail.dirty || skillForm.controls.smail.touched)"
                                    class="alert alert-danger">
                                    <div *ngIf="skillForm.controls.smail.errors.required">
                                        Email is required.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="padding:10px;">
                            <button ejs-button [disabled]="!skillForm.valid">Done</button>
                            <button ejs-button type="reset"
                                [disabled]="!(skillForm.controls.sname.valid ||skillForm.controls.smail.valid || skillForm.controls.skillname.valid)">Reset</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-xs-5 col-sm-5 col-lg-5 col-md-5" style="padding-top:20px;">
            <div style="webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
       box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
       margin:0 auto;height:330px;">
                <div style="padding:30px;">
                    <div class="form-group">
                        <span style="font-weight:800;">Selected Language: </span>
                        <span style="font-style:oblique;color:#8a2be2;">
                            {{ skillForm.get('skillname').value }}</span>
                    </div>
                    <div class="form-group" style="padding-top:50px;">
                        <span style="font-weight:800;">Buyer Name: </span>
                        <span style="font-style:oblique;color:#8a2be2;">
                            {{ skillForm.get('sname').value }}</span>
                    </div>
                    <div class="form-group" style="padding-top:50px;">
                        <span style="font-weight:800;">Buyer Mail ID: </span>
                        <span style="font-style:oblique;color:#8a2be2;">
                            {{ skillForm.get('smail').value }}</span>
                    </div>
                </div>
            </div>
        </div>
        <link href='https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css' rel='stylesheet' />
    </div>
</body>

</html>