除了輸入框類型的表單外，選擇性類型的表單也是常用的輸入方式。

下拉式選單

在引用 MatSelectModule 後，就可以利用 <mat-select> 定義下拉選單的表單。這個元素可以放在 <mat-form-field> 內，因此選單之外的設定與昨天的描述相同。

<mat-form-field>
  <mat-label>專案名稱</mat-label>
  <mat-select formControlName="projectName">
    <mat-option value="專案 A">專案 A</mat-option>
    <mat-option value="專案 B">專案 B</mat-option>
  </mat-select>
</mat-form-field>

預設情況下，Material 的下拉選單會針對已選擇的項目會顯示勾選圖示，可以利用 hideSingleSelectionIndicator 屬性；或是定義 MatSelectConfig 變數，並抽換 MAT_SELECT_CONFIG 令牌提供者，就可以隱藏勾選圖示。然而，有時候我們指定選單值是物件時，我們也可以設定 compareWith 屬性來定義比較兩個物件的方式。

export const customSelectOptions: MatSelectConfig = {
  hideSingleSelectionIndicator: true,
};

如下面程式，Angular Material 的下拉選單也提供 <mat-optgroup> 來讓分群選項，以及 multiple 屬性來設定下拉選單是多選。

<mat-form-field>
  <mat-label>專案名稱</mat-label>
  <mat-select formControlName="projectName">
    <mat-optgroup label="客戶 X">
      <mat-option value="專案 A">專案 A</mat-option>
      <mat-option value="專案 B">專案 B</mat-option>
    </mat-optgroup>
    <mat-optgroup label="客戶 Y">
      <mat-option value="專案 G">專案 H</mat-option>
      <mat-option value="專案 H">專案 H</mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

另外，透過 <mat-select-trigger> 標籤則是可以讓我們定義在選擇完後，表單欄位中所會顯示的內容。

<mat-form-field>
  <mat-label>標籤</mat-label>
  <mat-select formControlName="tags" multiple="true">
    <mat-select-trigger>
      {{tags.value?.[0] || ''}}
      @if ((tags.value?.length || 0) > 1) {
      <span> (+{{ (tags.value?.length || 0) - 1 }})</span>
      }
    </mat-select-trigger>
    <mat-option value="angular">angular</mat-option>
    <mat-option value="c#">c#</mat-option>
    <mat-option value="vue">Vue</mat-option>
    <mat-option value="react">React</mat-option>
  </mat-select>
</mat-form-field>

Checkbox 與 Radio

另一種單選或多選的表單就是 <mat-checkbox> 與 <mat-radio-button> 兩個標籤，前者需引用 MatCheckboxModule 模組，後者則是 MatRadioModule 模組。

<mat-checkbox indeterminate="true">全選</mat-checkbox>

一般而言，勾選框的結果是 true 與 false 兩者，如上面程式，<mat-checkbox> 提供 indeterminate 參數來讓其有第三種結果，常使用在全選的勾選項中。而 <mat-radio-button> 會放置在 <mat-radio-group> 標籤內來讓使用者在多個選項中選擇其一。順帶一提，這三個標籤都可以透過labelPosition 來設定勾選位置是在文字之前或是之後。

<mat-radio-group>
  <mat-radio-button>選項一</mat-radio-button>
  <mat-radio-button>選項二</mat-radio-button>
  <mat-radio-button>選項三</mat-radio-button>
</mat-radio-group

SelectionList

在先前的文章中有描述的 List 元件，也提供了 <mat-selection-list> 標籤來定義另一種的選單的方式。

<mat-selection-list multiple="false">
  <mat-list-option>選項一</mat-list-option>
  <mat-list-option>選項二</mat-list-option>
  <mat-list-option>選項三</mat-list-option>
</mat-selection-list>

今日範例

• Stackblitz

接下來

今天描述了選擇類型的表單，接下來，則會使用如 AutoComplete、Chip 等其他類型的表單。