2020-5-28 Angular 第7章 - 使用反應式表單

[hsiaofung]

表單:

• 資料連結
• 不同的表單元素
• 檢驗
• 顯示錯誤

[hsiaofung]

• 反應式程式設計 : 撰寫處理與反應非同步資料串流的程式。
• 反應式表單是非同步 : 可以完全控制資料與UI間的雙向同步。
• 表單控制項:
  • FormControl : 代表模板中的表單元素。反應式表單只是一群FormControl。
  • 我們在FormControl層級初始化值與檢驗程序。
• 反應式表單的其他優點:
  • 強制開發者分離使用者所見、互動(表單模型)，和驅動應用程式的資料模型。

[hsiaofung]

步驟: app.module.ts >

• 匯入ReactiveFormsModule
• 將ReactiveFormsModule加到NgModule的imports中

[hsiaofung]

心得: 製作元件步驟

• 元件:

  • 第1: 模板把html做好，(保留資料連結、CSS連結與事件連結的部分)。
  • 第2: 再把CSS做好，包括CSS在模板被連結的屬性。
  • 第3: 新建資料模組(類別)
  • 第4: 在元件中調用新建的資料類別(型別)。
  • 第5: 資料連結 : 看是要在元件中做資料初始、還是@input(從父元件)傳入。
  • 第6: 事件連結 : 看是要在元件中做事件處理器、還是@output(到父元件)處理。

• 元件的上一層

  • 第7: 先把模板做好: 調用子元件(連接子元的資料與事件，若子元件有@input或@output)
  • 第8: CSS(若有需要)
  • 第9: 元件: 調用自訂義類別、宣告變數(型別)、初始化資料ngOnInit(若有)、定義事件處理器。

[hsiaofung]

FormControl 的步驟:

• 模板:
  • 使用FormControl 連結而非ngModel。
  • 存取表單欄位的目前值。
• 元件:
  • 匯入並建構稱為nameControl的FormControl實例。
  • 在onSubmit()呼叫中，輸出nameControl控制項的value值。

[hsiaofung]

表單群組 :

• FormGroup : 是集合相關表單欄位在一個群組下的有用方式。它讓我們能以個別或群組追蹤表單控制項。
• 比方說，我們可以取得整個表單值，或檢查表單整體是否有效(個別元素與其狀態的結果)
• 步驟:
  • 連結formGroup而非formControl
  • 使用formGroup，在此群組中使用formControlName
  • 輸出表單群組而非元素值

[hsiaofung]

• FormGroup 能讓我們初始化其中多個具名控制項。
• FormControl 建構元可以讓我們加入預設值與檢驗程序。

[hsiaofung]

• FormControl 建構元的第一個參數 : 是表單控制項的預設值。
• FormControl 建構元的第二個參數 : 可以是單一Validator或Validator陣列。有一組內建的檢驗程序可確保FormControl是必填或有最小值。
• 提交表單時(使用ngSubmit事件連結)，我們輸出整個表單群組值到控制台。

[hsiaofung]

• FormBuilder : 更乾淨的方式建構複雜的表單。
• FormBuilder 的一項優點是無需修改模板。FormBuilder基本上是快速建構FormGroup與FormControl元素，而無須為每個元素呼叫new的語法縮寫。

[hsiaofung]

• FormBuilder 的步驟
  • 從@angular/forms 匯入FormBuilder
  • 宣告時不再初始化FormGroup
  • 將FormBuilder實例注入建構元。
  • 使用注入的FormBuilder 建構FormGroup
  • 以空值初始化名稱控制項與必要的檢驗程序。
  • 元素更多的表單使用FormBuilder而非FormGroup比較合理，因為程式更少更可讀。

[hsiaofung]

• 表單資料 : 檢驗與顯示錯誤訊息

  • 透過群組存取個別控制項元素的有效性。 <div *ngIf="stockForm.get('name').invalid &&(stockForm.get('name').dirty||stockForm.get('name').touched)">Name is required</div>

• 檢查表單元素個別檢驗程序的狀態 <div *ngIf="stockForm.get('code').errors.required">Stock Code is required</div>

• 每個表單元素下面有個div元素，用來顯示條件式錯誤訊息。

• 從元件類別初始化FormGroup時。我們以個別表單控制項的名稱呼叫stockForm.get()取得個別表單元素。

• 我們對每個FormControl檢查各種屬性，像是元素是否被碰過(也就是使用者是否存取過該元素)、表單元素是否修改過(髒或乾淨)、是否有效等。

• 確保只有在表單元素有效且使用者修改(有修改為dirty，否則是pristine)或存取(有存取為touched，否則是untouched)才顯示錯誤訊息。

• 對檢驗程序一個以上的表單欄位(股票代碼與價格)檢查errors屬性。此欄位能讓我們檢查errors屬性。此欄位讓我們檢查什麼錯誤導致此表單欄位無效，並顯示相對的錯誤訊息。

• 可以使用getter 讓程式碼更簡潔。

• 有哪些屬性

  • invalid
  • dirty
  • touched
  • errors
    • required
    • minlength
    • min

[hsiaofung]

• 表單與資料模型 : 討論存取與操作表單資料，以及表單與元件資料模型互動。

[hsiaofung]

其他功能:

1. 重置表單。
2. 模擬從伺服器載入股票。

[hsiaofung]

• setValue : 此方法取用完全符合表單模型JSON模型物件。鍵值不能多也不能少要一樣多，否則會拋出錯誤。

• patchStockForm : 這個方法以可用的欄位更新表單，他會忽略多餘的欄位。

• reset: 這個方法重置表單到初始狀態。

[hsiaofung]

• FormArray
• 新功能 :
  • 對股票加入代表一或多個經營者的模型
  • 在UI加入新增經營者的按鈕
  • 在UI加入刪除經營者的按鈕
  • 對新增的經營者進行基本檢驗

[hsiaofung]

總結:

• 如何建構反應式表單 ?
• FormControl、FormGroup、FormArray
• 模板驅動表單與反應式表單的差別?
• 表單模型(或顯示模型)與資料模型的差別?

[hsiaofung]

習題:

• 建構新元件以加入新產品
• 建構輸入產品名稱、價格、圖片URL、是否促銷的表單。建構FormGroup來封裝這個表單。使用FormBuilder。
• 除了On Sale 外均為必填。價格最小有效值為1。
• 加上Regex檢驗圖片URL。
• 僅於使用者修改欄位或提交時顯示相關錯誤訊息。
• 成功提交時從控制台輸出表單。