表單是應用程式中讓使用者輸入資料的功能，今天來利用 Angular Material 提供的表單元件來實作工作事項表單。

Form Field

在引用 MatFormFieldModule 模組後，就可以透過 <mat-form-field> 來定義每一個表單欄位，其內可以放置實作 MatFormFieldControl 介面的元件，如 matInput、<mat-select> 與 <mat-chip-list> 等Material 內建元件。順帶一提，我們也可以自定表單元件來放到 Form Field 內。

<mat-form-field>
  <mat-label>主旨</mat-label>
  <input type="text" matInput placeholder="主旨" formControlName="subject" />
</mat-form-field>

首先，我們可以利用 <mat-lable> 來定義各欄位標籤文字；這個文字預設會在未輸入時顯示在欄位上，而在輸入內容後就移至左上方。當表單欄位有設定 Validators.required 驗證的話，此處會顯示星號來表示，我們也可以把 hideRequiredMarker 設定為 true 來不顯示星號。

另外，上圖的主旨欄位是 Angular Material 預設呈現的 Form Field 的樣式，也可以利用 appearance 屬性改成如內容欄位一樣以框線 (outline) 呈現。

export const customFormFieldOptions: MatFormFieldDefaultOptions = {
  appearance: 'fill',
  hideRequiredMarker: true,
};

如果其他 Material 元件，我們也可以利用定義 MatFormFieldDefaultOptions 變數或類別，來統一整個應用程式中 Form Field 的外觀設定。

Error

在表單中常會進行驗證來檢查使用者輸入的內容是否符合需求，而在 Form Field 內我們可以利用 <mat-error> 來顯示當驗證錯誤時的訊息。

<mat-form-field>
  <mat-label>主旨</mat-label>
  <input type="text" matInput placeholder="主旨" formControlName="subject" />
  @if (subject.hasError('required')) {
    <mat-error>請輸入主旨</mat-error>
  }
</mat-form-field>

而在預設情況下，Angular Material 的錯誤訊息會在使用者 force 之後並沒通過驗證時才會出現，如果希望在一開始就顯示錯誤訊息，就可以實作並抽換 ErrorStateMatcher 介面。

@Injectable()
export class AlwaysDisplayErrorMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl): boolean {
    return !!(control && control.invalid);
  }
}

表單其他資訊

Angular Material 的 Form Field 也提供了 Hint 的功能，我們可以利用 <mat-form-field> 的 hintLabel 屬性，或是 <mat-hint> 標籤來設定此欄位的其他資訊。最後，也可以透過 matSuffix 與 matPrefix 在輸入框前後加入其他的資訊。

<mat-form-field appearance="outline" hintLabel="工作事項內容">
  <mat-label>內容</mat-label>
  <input type="text" matInput placeholder="內容" formControlName="content" />
  <mat-hint align="end">{{ content.value?.length }}/10</mat-hint>
  @if (content.hasError('required')) {
    <mat-error>請輸入內容</mat-error>
  }
</mat-form-field>

今日範例

• Stackblitz

接下來

明天我們繼續來使用其他的 Angular Material 表單。