一般來說，表單內有欄位是可以選取多個選項時，我們會採用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: 設定限制選取的