[從 0 開始的 Angular 生活]No.46 Angular 表單

前言

用表單處理使用者輸入的資料是許多常見應用的基礎功能,像是使用者登入、修改資料、建立資料等等。

而 Angular 提供了兩種不同的方式透過表單處理使用者的輸入:

  • 響應式表單 ( reactive )
  • 範本驅動表單 ( template-driven )

這些名詞看起來相當陌生,實際上用起來最簡單的會是範本驅動表單,因為它的使用方式相當直觀。

響應式表單 ( reactive )

然而,根據官方文件的敘述,響應式表單的優點是:

  • 可擴充套件性
  • 可複用性
  • 可測試性

以上這三點特性都比範本驅動表單要強,如果這個表單是專案內相當重要且複雜的部份,推薦使用這種方式來建立表單。

範本驅動表單 ( template-driven )

範本驅動表單的優點就是易於使用,很容易就能在目前的 Angular 應用中添加一個簡易的表單,像是使用者的登入。

白話來說,如果需求的表單功能相當簡易、邏輯不複雜,可以考慮使用範本驅動表單。

兩者差異

以下為官方標註的差異

小結

具體來說該用哪種呢?

實際上這沒有絕對的好壞,還是得看使用情境。

倘若使用的情境既不需要寫測試、需要用到表單的地方邏輯又相當簡單,那就可以使用範本驅動表單搞定;相反的,若是相當複雜那就可以考慮使用響應式表單了。

接下來試著以範本驅動表單的方式來建立一個表單吧~

0%