Multi-Row Input 控制項介紹
Multi-Row Input 用一組子欄位編輯可新增、刪除的物件陣列。它會加入所在 Form 的欄位狀態、驗證與提交範圍。
1. 適用情境
常見用途:
- 緊急聯絡人
- 訂單明細與費用列
- 數量有限的重複業務記錄
2. 新增與設定
- 把 Multi-Row Input 加入 Form Section 的 Fields 區域。
- 設定穩定且唯一的 Field Key / Name,並與後端 DTO 屬性一致。
- 設定下列元件屬性,再視需要加入 Required、Help Text、Full row 與條件運算式。
- 在 Design Preview 檢查初始值與版面,並使用 Form Validate / Submit 驗證完整資料流程。
3. 主要屬性
| 屬性 | 作用 |
|---|---|
| Fields | 定義表單繫結、提交或回應的資料形狀。 |
| Max Rows | 限制允許的數量、長度或取值範圍。 |
| Show Label / Show Header | 控制欄位在 Design Preview 與 Runtime 中的顯示方式。 |
| Table Layout | 控制欄位在 Design Preview 與 Runtime 中的顯示方式。 |
| Hide New / Hide Delete | 啟用或關閉此行為。 |
| Validator | 定義表單繫結、提交或回應的資料形狀。 |
Field Key、Required、Help Text、Full row、Visible When 等通用屬性由 Form 欄位契約提供;本表列出使用 Multi-Row Input 時最需要注意的設定。
4. 表單值與後端契約
提交值: 物件陣列;每個物件的屬性來自 Multi-Row Input 子欄位的 Field Key。
[
{"name": "Alex", "relationship": "Manager", "phone": "+1 555 0100"}
]
範例只說明資料形狀;API 仍應依業務 DTO 驗證型別、範圍與權限。
5. 驗證、條件與互動
所有欄位都可使用 Required、Visible When、Disabled When、Required When、Dependencies 與 Clear When Hidden。條件運算式只控制互動,不取代後端權限與驗證。
元件能力: 支援 setValue,可由按鈕、Step 或其他動作寫入欄位值。
6. 使用建議
設定建議: 先固定請求與回應 JSON 契約,再設定欄位;對陣列項目、檔案中繼資料與伺服器錯誤路徑做端到端測試。
返回 Form 總覽,瞭解版面、驗證、提交、草稿與後端協定。