在松弛模态视图中显示错误答案

【问题标题】：Displaying errors in slack modal view在松弛模态视图中显示错误
【发布时间】：2020-09-06 11:31:21
【问题描述】：

我正在尝试创建一个模式，使用户能够输入日期以供进一步使用。此日期不能是过去或现在的日期（仅限未来日期）。 Slack表示可以验证输入数据并在模态视图中显示错误here但我不是很了解这种方法（我是自学者和新手）。

这是我在view.open 中的viewobject：

{
          type: "modal",
          callback_id: "tests",
          title: {
            type: "plain_text",
            text: "Tests",
            emoji: true
          },
          submit: {
            type: "plain_text",
            text: "Send",
            emoji: true
          },
          close: {
            type: "plain_text",
            text: "Cancel",
            emoji: true
          },
          blocks: [
            {
              type: "input",
              block_id: "datepicker",
              optional: false,
              element: {
                action_id: "calendar",
                type: "datepicker",
                initial_date: "2020-09-05",
                placeholder: {
                  type: "plain_text",
                  text: "Select a date",
                  emoji: true
                }
              },
              label: {
                type: "plain_text",
                text: "Label",
                emoji: true
              }
            }
          ]
        }

收到view_submission 后，我需要帮助在视图中显示错误（我已经可以描述该错误）。提前致谢！

【问题讨论】：

标签： javascript modal-dialog slack slack-api

【解决方案1】：

首先，我强烈建议您在代码中将 block_id 从“datepicker”更改为更具描述性的内容。 Slack 的示例使用“ticket-due-date”，所以我将使用它。

输入日期后，Slack 将向您在交互请求 URL 中指定的端点发送 HTTP POST 请求。该有效载荷将如下所示（从Block Kit Builder 获得）：

{
    "type": "block_actions",
    "user": {
        "id": "U0CA5",
        "username": "Amy McGee",
        "name": "Amy McGee",
        "team_id": "T3MDE"
    },
    "api_app_id": "A0CA5",
    "token": "Shh_its_a_seekrit",
    "container": {
        "type": "message",
        "text": "The contents of the original message where the action originated"
    },
    "trigger_id": "12466734323.1395872398",
    "team": {
        "id": "T0CAG",
        "domain": "acme-creamery"
    },
    "response_url": "https://www.postresponsestome.com/T123567/1509734234",
    "actions": [
        {
            "type": "datepicker",
            "block_id": "ticket-due-date",
            "action_id": "vxw",
            "selected_date": "1990-04-26",
            "initial_date": "1990-04-28",
            "action_ts": "1599429672.233568"
        }
    ]
}

当您收到该请求时，您需要验证 actions[0].selected_date。如果无效，则将下面的有效负载作为 POST 请求发送到response_url。

{
  "response_action": "errors",
  "errors": {
    "ticket-due-date": "You may not select a due date in the past"
  }
}

【讨论】：

我没有看到response_url。只有trigger_id。有什么要补充的吗？

【解决方案2】：

您需要响应调用端点的同一请求。

以下是交互端点的外观：

app.post("/your_endpoint", (req, res) => {
  const validationErrors = {
    datepicker: "Please enter a valid date"
  };

  // Respond to the request with an error payload
  res.send({
    response_action: "errors",
    errors: validationErrors,
  });
});

【讨论】：