在没有无操作消息的情况下禁用 Elm 表单提交

Question

我有一个带有 HTML 表单（包含输入字段和提交按钮）的 Elm 应用程序，我想在输入无效时禁用它。当输入无效时，我设法通过将表单提交绑定到无操作消息来做到这一点：

type Msg
    = Input String
    | Submit
    | Noop

viewForm : Model -> Html Msg
viewForm = form [ onSubmit (if model.valid then Submit else Noop) ]
    [ input [ onInput Input ] []
    , button [ disabled (not model.valid) ] [ "Submit" ]
    ]

update 然后对Noop 消息不执行任何操作。该按钮也被禁用，但这是次要的，因为我也关心通过从文本输入中按 Enter 来提交表单。请注意，跳过 onSubmit 处理程序不起作用，因为然后按 Enter 将重新加载页面。

这感觉有点混乱和低效，所以我的问题是：

1. 在 Elm 中实现此目的的惯用方法是什么？
2. 将无操作消息用于无操作 Javascript 事件处理程序的成本要高出多少。

Answer 1

首先，我不得不说你的实现是好的，发送Noop消息没有坏处，这就是它存在的原因。

最好的方案是完全移除监听器（如果可能的话）并在视觉上禁用按钮。如果model.valid 变化非常频繁，这实际上可能会导致性能下降。

我正在使用帮助程序有条件地将内容添加到列表中：

appendIf : Bool -> a -> List a -> List a
appendIf flag value list =
    if flag == True then
        list ++ [ value ]
    else
        list

所以你可以这样使用它：

view model =
  button
    ([ type_ "" submit ] |> appendIf model.valid (onClick Submit))
    []