深入指南
表單

使用 Angular 訊號的表單

Signal Forms 是一個函式庫，讓你能在 Angular 應用程式中管理表單狀態，並建立在訊號的反應式基礎之上。透過自動雙向繫結、型別安全的欄位存取，以及以結構定義為基礎的驗證，Signal Forms 能協助你建立穩健的表單。

TIP: 想快速認識 Signal Forms，請參閱 Signal Forms 基礎指南。

為什麼要用 Signal Forms？

在 Web 應用程式中建立表單，牽涉到好幾項彼此連動的工作：追蹤欄位值、驗證使用者輸入、處理錯誤狀態，以及讓 UI 與資料模型保持同步。若把這些工作分開管理，就會產生大量樣板程式碼與複雜度。

Signal Forms 透過以下方式解決這些挑戰：

  • 自動同步狀態 - 自動將表單資料模型與繫結的表單欄位同步
  • 提供型別安全 - 在 UI 控制項與資料模型之間，支援完全型別安全的結構定義與繫結
  • 集中驗證邏輯 - 使用驗證結構定義，在單一位置定義所有驗證規則

Signal Forms 最適合用在以訊號打造的新應用程式。若你正在維護使用反應式表單的既有應用程式，反應式表單仍然是可靠的選擇。

NOTE: 若你是從範本表單或反應式表單轉過來的，可能會對比較指南有興趣。

前置需求

Signal Forms 需要：

  • Angular v21 或更高版本

設定

Signal Forms 已內含在 @angular/forms 套件中。請從 @angular/forms/signals 匯入需要的函式與指令：

import {form, FormField, required, email} from '@angular/forms/signals';

凡是將表單欄位繫結到 HTML 輸入元素的元件，都必須匯入 FormField 指令：

@Component({
  // ...
  imports: [FormField],
})

後續步驟

想進一步了解 Signal Forms 的運作方式，請參閱下列指南：