CODEWITHSUNDEEP
angularnpmangular-material
Anish Sinha
Anish Sinha

Reputation: 139

Customize ng-multiselect-dropdown so we can bind multiple model fields

enter image description here

How to customize ng-multiselect-dropdown control so we can add CodeField, It helps me to persist model value while selection?

enter image description here

Upvotes: 0

Views: 2422

Answers (1)

Anish Sinha
Anish Sinha

Reputation: 139

step1 : we can refer below link https://cuppalabs.github.io/angular2-multiselect-dropdown/#/groupby

step2 :

<angular2-multiselect id="CustomerControlId"
                                          [data]="CustomerList"
                                          formControlName="customerControl"
                                          [settings]="MultiSelectSettingsByGroup"
                                          (onSelect)="onItemSelect($event)"
                                          (onDeSelect)="onItemDeSelect($event)"
                                          (onSelectAll)="onSelectAll($event)"
                                          (onDeSelectAll)="onDeSelectAll($event)">
                    </angular2-multiselect>

step 3: settings

 this.MultiSelectSettingsByGroup = {
        singleSelection: false,
        text: "Select Fields",
        selectAllText: 'Select All',
        unSelectAllText: 'UnSelect All',
        searchPlaceholderText: 'Search',
        primaryKey:"Id",
        labelKey:"Name",
        enableSearchFilter: true,
        badgeShowLimit: 5,
        groupBy: "Code"
    };

step 4 : load list in CustomerList.

CustomerList: DropdownItemExt[] = [];

export class DropdownItemExt {
Id: string;
Code: string;
Name: string;

}

step 5 : you can place in Reactive forms 'fb' is formBuilder

return this.fb.group({
        customerControl: new FormControl(this.Fsmodel.customers), // model class property , optional for initializing from FsModel

step 6 : you can find selected customers

this.rcForm.get('customerControl').value as DropdownItemExt[];

step 7 : settings configuration is case-sensitive refer steps 3 & 4.

Upvotes: 0

Related Questions