在没有 no-op 消息的情况下禁用 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 将重新加载页面。

感觉有点乱，效率低下，所以我的问题是：

在 Elm 中实现这个的惯用方法是什么？
将空操作消息用于空操作 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))
    []

在没有 no-op 消息的情况下禁用 Elm 表单提交

Disable Elm form submission without no-op message

html

forms

form-submit

elm

onsubmit