Angular Third Party : ng-multiselect-dropdown(Style類似Bootstrap)

一般來說，表單內有欄位是可以選取多個選項時，我們會採用CheckBox或Multiselect Dropdown，但當選項過多時為了節省版面空間，我們通常會使用Multiselect Dropdown 以下拉勾選的方式來呈現。

目前在Angular幾個知名的元件像是Angular Material和PrimeNG都有Multiselect Dropdown元件可以用，但筆者使用的是Ngx-Bootstrap...很不幸地...它並沒有Multiselect Dropdown元件，所以可能要多花心力自己刻元件或是上網找找看其他符合Bootstrap Style的Multiselect Dropdown元件來用了。當然Ngx-Bootstrap也可以與Angular Material或PrimeNG的元件混用，但在視覺呈現上會顯得突兀並且有些奇怪。

最後很幸運地，筆者在npm找到了一個Multiselect Dropdown元件名為ng-multiselect-dropdown，它的Style類似Bootstrap且功能完備(如Filter、Limit Selection等功能)，更重要的是它支持Template Driven Form和Reactive Form，其用法如下所示 :

1. 匯入 NgMultiSelectDropDownModule

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
@NgModule({
  imports: [
    NgMultiSelectDropDownModule.forRoot(),
  ]
})
export class AppModule { }

2. 在Reactive Form使用ng-multiselect-dropdown元件並設定settings，其常用屬性如下:

• singleSelection: 設定單選或多選
• idField: 設定欄位的Id
• textField: 設定欄位的Text
• selectAllText: 設定選取所有項目時，所顯示的文字
• unSelectAllText: 設定未選取項目時，所顯示的文字
• limitSelection: 設定限制選取的數量,
• allowSearchFilter: 設定是否啟用過濾功能

3. 使用ng-multiselect-dropdown的事件，其常用事件如下:

• (onSelectAll): 選取全部項目時觸發
• (onSelect): 每當選取任一項目時觸發
• (onFilterChange): 過濾項目時觸發
• (onDropDownClose): 下拉式選單關閉時觸發
• (onDeSelectAll): 取消選取全部項目時觸發
• (onDeSelect): 每當取消選任一項目時觸發

<form [formGroup]="Form">
  <ng-multiselect-dropdown
      [placeholder]="'Please choose three items you want'"
      [data]="Items"
      formControlName="Items"
      [settings]="Settings"
      (onSelectAll)="this.OnSelectAll($event)"
      (onSelect)="this.OnSelect($event)"
      (onFilterChange)="this.OnFilterChange($event)"
      (onDropDownClose)="this.OnDropDownClose($event)"
      (onDeSelectAll)="this.OnDeSelectAll($event)"
      (onDeSelect)="this.OnDeSelect($event)"
      >
  </ng-multiselect-dropdown>
  <br/>
  <button type="button" (click)="this.OnSubmit()">Submit</button>
</form>

 
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { IDropdownSettings } from 'ng-multiselect-dropdown/multiselect.model';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  Form: FormGroup;
  Items = [];
  SelectedItems = [];
  Settings: IDropdownSettings = {};
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.Items = [
      { Id: '0', Text: 'PC' },
      { Id: '1', Text: 'Laptop' },
      { Id: '2', Text: 'Tablet' },
      { Id: '3', Text: 'Smart Phone' },
      { Id: '4', Text: 'Switch' },
      { Id: '5', Text: 'PS4' }
    ];
    this.SelectedItems = [{ Id: '1', Text: 'Laptop' }, { Id: '2', Text: 'Tablet' }];
    this.Settings = {
      singleSelection: false,
      idField: 'Id',
      textField: 'Text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      limitSelection: 3,
      allowSearchFilter: true
    };
    this.Form = new FormGroup({
      Items:new FormControl(this.SelectedItems)
    });
  }
  OnSubmit(): void {
    console.log('OnSubmit:', this.Form.value);
  }
  OnSelect(item: any): void {
    console.log('OnSelect:', item);
  }
  OnSelectAll(items: any): void {
    console.log('OnSelectAll:', items);
  }
  OnFilterChange(item: any): void {
    console.log('OnFilterChange:', item);
  }
  OnDropDownClose(item: any): void {
    console.log('OnDropDownClose:', item);
  }
  OnDeSelectAll(items: any): void {
    console.log('OnDeSelectAll:', items);
  }
  OnDeSelect(item: any): void {
    console.log('OnDeSelect:', item);
  }
}

執行結果如下所示:

參考資料:https://github.com/nileshpatel17/ng-multiselect-dropdown