在Elm中的表单提交上有条件地切换“preventDefault”

有没有办法在表单提交时有条件地切换

preventDefault

？ 我尝试使用下面的

onWithOptions

，但似乎只使用了第一个设置，即使我可以看到它在模型上有名称时使用

Debug.log

进行更改

, onWithOptions
    "submit"
    (if model.name == "" then
        (Debug.log "prevent" { preventDefault = True, stopPropagation = True })
      else
        (Debug.log "allow" { preventDefault = False, stopPropagation = False })
    )
    (Json.succeed FormSubmit)

更新了答案中的调查结果 如@Tosh所述，隐藏按钮可以解决以下问题：

, button
    [ onPreventClickHtml FormSubmit
    , Html.Attributes.hidden (model.name == "" |> not) ]
    [ text " prevent" ]
, button
    [ onClick FormSubmit
    , Html.Attributes.hidden (model.name == "") ]
    [ text "allow" ]

其中，

onPreventClickHtml

是：

onPreventClickHtml : Msg -> Attribute Msg
onPreventClickHtml msg =
    onWithOptions
        "click"
        { preventDefault = True, stopPropagation = True }
        (Json.succeed msg)

有条件地显示按钮不起作用：

, (if model.name == "" then
    button
        [ onPreventClickHtml FormSubmit ]
        [ text " prevent" ]
  else
    button
        [ type' "submit", onClick FormSubmit ]
        [ text "allow" ]
  )

我正在使用elm-mdl，因此发现实现解决方案更具挑战性，因为根据我的经验，创建自定义onclick需要elm-mdl未公开的类型，因此需要复制

, if model.name == "" then
    Material.Options.nop
  else
    Material.Options.css "visibility" "hidden"
, onPreventClick FormSubmit

, if model.name == "" then
    Material.Options.css "visibility" "hidden"
  else
    Material.Options.nop
, Button.onClick FormSubmit



onPreventClick : Msg -> Property Msg
onPreventClick message =
    Material.Options.set
        (\options -> { options | onClick = Just (onPreventClickHtml message) })

-- Duplicated from elm-mdl
type alias Property m =
    Material.Options.Property (Config m) m

-- Duplicated from elm-mdl
type alias Config m =
    { ripple : Bool
    , onClick : Maybe (Attribute m)
    , disabled : Bool
    , type' : Maybe String
    }

另一种适用于我的场景的方法是更改按钮类型：

, if model.name == "" then
    Button.type' "reset"
  else
    Button.type' "submit"

---

一个简单的解决建议，直到有人告诉我们如何解决它

创建两个按钮（如图所示，具有不同的选项）并根据条件仅显示其中一个如何？

---

你可以使用

Html.Attributes.hide

。

我复制了它。事件处理程序似乎没有得到更新（

makeEventHandler（）

在js中只被调用一次）。这可能是一个错误。我建议你提出一个问题，除非有人能给我们一个解释。谢谢你的确认谢谢你的建议。有条件地包含按钮会遇到相同的问题，但隐藏按钮确实有效。我使用的是elm mdl，material design，它有点难看，因为它不公开创建自定义onClick似乎需要的类型，但我可以让它工作。我的方向是改变按钮类型，这在我的场景中起作用。我将用一些代码片段更新我的答案。