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

【问题标题】：Conditionally toggle `preventDefault` on form submissions in Elm有条件地在 Elm 中的表单提交上切换“preventDefault”
【发布时间】：2016-10-11 02:30:25
【问题描述】：

有没有办法在提交表单时有条件地切换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"

【问题讨论】：

我复制了它。事件处理程序似乎没有更新（js 中的makeEventHandler() 仅被调用一次）。这可能是一个错误。我建议您提出问题，除非有人可以给我们解释。
感谢您的确认

标签： elm

【解决方案1】：

一个简单的解决方法建议，直到有人可以向我们展示如何解决它。

如何创建两个按钮（如您所示，具有不同的选项）并根据条件仅显示其中一个？你可以使用Html.Attributes.hide。

【讨论】：

感谢您的建议。有条件地包含按钮会遇到同样的问题，但隐藏按钮确实有效。我正在使用 elm-mdl，材料设计，它有点难看，因为它没有公开似乎创建自定义 onClick 所需的类型，但我可以让它工作。我去的方向是改变按钮类型，这在我的场景中起作用。我会用一些代码 sn-ps 更新我的答案。