第六章：條件邏輯 (conditions)

如果您將 layout 視為表單的「骨架」，那麼 conditions 就是它的「神經系統」。這正是 MoriForms 強大之所在，它能讓您的表單從一個靜態的資料收集工具，蛻變為一個能夠與使用者即時互動、有智慧的應用程式。

透過條件邏輯，您可以實現：

• 當使用者在下拉選單中選擇「其他」時，才顯示一個「請詳細說明」的文字框。
• 根據使用者選擇的服務方案，動態顯示不同的選項和價格。
• 在一個多步驟的問卷中，根據前面的答案，直接跳過後面不相關的步驟。

條件規則的結構

conditions 是一個位於頂層的陣列，其中包含了數個「規則物件」。每一個物件都代表一條獨立的 IF...THEN...ELSE 邏輯。將規則分離，可以讓您輕鬆管理複雜表單中的多條邏輯，而不會相互混淆。

一個基礎的規則物件結構如下：

JSON

{
  "if": {
    "logic": "AND",
    "rules": [
      // ... 觸發條件規則 ...
    ]
  },
  "then": [
    // ... 條件為真時執行的動作 ...
  ],
  "else": [
    // ... (可選) 條件為假時執行的動作 ...
  ]
}

1. if 區塊：定義觸發條件

if 區塊定義了這條規則被觸發的 前提 。它由 logic 和 rules 兩個部分組成。

• logic (String): 當 rules 陣列中有多於一條規則時，此屬性決定了它們之間的關係。
  • "AND": 所有規則都必須為真，整個 if 區塊才算為真。
  • "OR": 只要有一條規則為真，整個 if 區塊就算為真。
• rules (Array): 一個包含了單一或多個「條件規則」的陣列。每個規則都是一個物件，用來檢查某個欄位的狀態。
  • fieldId (String): 您要檢查的目標欄位的 id。
  • operator (String): 您要使用的比較運算子。
  • value (Any): 您要與欄位值進行比較的值。

可用的 operator (運算子)

2. then & else 區塊：定義執行動作

當 if 區塊的條件被滿足（或不滿足）時，then（或 else）區塊中定義的動作將會被執行。這兩個區塊都是「動作物件」的陣列，意味著一個觸發可以引起一連串的反應。

每個「動作物件」的結構如下：

• action (String): 要執行的動作類型。
• targetId (String): 該動作要影響的目標元素（可以是欄位、群組或步驟）的 id。
• value (Any, 可選): 僅在 action 為 setValue 時使用，定義要設定的新值。

可用的 action (動作)

3. 綜合範例

範例 1：經典的「其他」欄位

當使用者在下拉選單中選擇「其他」時，顯示一個文字輸入框。

• Layout 部分: JSON

  "layout": [
    {
      "id": "contact_reason",
      "type": "select",
      "label": "您想聯絡我們的原因是？",
      "options": [
        { "label": "產品問題", "value": "product" },
        { "label": "合作提案", "value": "partnership" },
        { "label": "其他", "value": "other" }
      ]
    },
    {
      "id": "other_reason_text",
      "type": "textarea",
      "label": "請詳細說明"
    }
  ]
  

• Conditions 部分: JSON

  "conditions": [
    {
      "if": {
        "rules": [{ "fieldId": "contact_reason", "operator": "is", "value": "other" }]
      },
      "then": [{ "action": "show", "targetId": "other_reason_text" }],
      "else": [{ "action": "hide", "targetId": "other_reason_text" }]
    }
  ]
  

  初始狀態下，other_reason_text 應該是隱藏的。這通常由 Skin 的 CSS/JS 預設處理。

範例 2：複合條件邏輯 (AND)

只有當使用者是「VIP 會員」且同意「接收行銷郵件」時，才顯示一個專屬優惠碼欄位。

• Conditions 部分: JSON

  "conditions": [
    {
      "if": {
        "logic": "AND",
        "rules": [
          { "fieldId": "user_status", "operator": "is", "value": "vip" },
          { "fieldId": "subscribe_promo", "operator": "is", "value": true }
        ]
      },
      "then": [{ "action": "show", "targetId": "vip_promo_code" }],
      "else": [{ "action": "hide", "targetId": "vip_promo_code" }]
    }
  ]
  

範例 3：動態設定欄位值

根據使用者選擇的方案，自動更新一個隱藏的價格欄位。

• Layout 部分: JSON

   "layout": [
      {
        "id": "plan_selection",
        "type": "radio",
        "label": "選擇您的方案",
        "options": [
          { "label": "基本方案 - $10", "value": "basic" },
          { "label": "專業方案 - $50", "value": "pro" }
        ]
      },
      { "id": "final_price", "type": "hidden" }
    ]
  

• Conditions 部分: JSON

  "conditions": [
    {
      "if": { "rules": [{ "fieldId": "plan_selection", "operator": "is", "value": "basic" }] },
      "then": [{ "action": "setValue", "targetId": "final_price", "value": 10 }]
    },
    {
      "if": { "rules": [{ "fieldId": "plan_selection", "operator": "is", "value": "pro" }] },
      "then": [{ "action": "setValue", "targetId": "final_price", "value": 50 }]
    }
  ]
  

下一步

透過 layout 和 conditions 的組合，您已經可以建構出結構和互動邏輯都極其豐富的表單。

在下一章，我們將探討表單生命週期的最後一個環節：當使用者按下送出按鈕後，會發生什麼事？我們將深入了解 actions 屬性，學習如何設定 Email 通知、API 呼叫等提交後動作。