[ngrx][ngrxForm]Boxed 類別model 設計應用

[ngrx][ngrxForm]Boxed 類別model 設計應用

 

如果我們想定義新增畫面的model

waferId這個欄位正常紀錄上就會使用 string[] 型別

image.png

但當這樣設計的時候會發現在前端ngrxForm綁定 ngrxFormControlState 時會有錯誤

image.png
image.png

這邊官方有給出一個解決方式 [Boxed](https://ngrx-forms.readthedocs.io/en/master/user-guide/value-boxing/)

image.png
image.png

設計成Boxed時ngrx在reducer建立出state時就會以 FormControlState的方式做紀錄

而不會是FormArrayState (FormArrayState 我們常用於畫面多層巢狀物件關聯時)

reducer的初始化值也直接assign box方法就可以

image.png

-----
有時候一個form中的formControl 會有存在多個單一值,但僅能當作一個值的情況

例如

image.png
image.png

這種formControl 我們在model設計就會加上

image.png

取用陣列時直接取用

image.png