禁用无操作消息的Elm表单提交

我有一个使用HTML表单（包含输入字段和提交按钮）的Elm应用程序，我希望在输入无效时禁用它。我已经成功通过表单提交绑定到一个空操作消息，这样做，当输入无效：禁用无操作消息的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键将重新加载页面。

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

什么是惯用的方法在榆树实现这一目标？
使用无操作消息给无操作的Javascript事件处理函数要贵多少钱。

来源

2017-08-27 robx

关于使用'disabled'属性是什么？ '按钮[禁用（不是model.valid）] [“提交”]' –

@IgorDrozdov禁用按钮似乎没有通过在输入字段中按Enter来禁用表单提交。 – robx

首先，我不得不说你的实现是正常的，发送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)) 
    []

来源

2017-08-27 17:55:38 halfzebra

我已经更新了问题以禁用按钮（我在本地执行的操作，只是没有包括在本例中）。你能否说“Noop”存在？能澄清你的意思吗？这是一个常见的成语吗？并且请注意，如果删除了'onSubmit'处理程序，则默认的HTML表单行为会导致页面重新加载。 – robx

@robx我个人的偏好是避免有一些特殊行为的元素，比如''，虽然它的语义是正确的，但由于aria属性，它不再需要。 'NoOp'消息是许多Elm应用程序中使用的一般信息，它可以完全正确。 – halfzebra

禁用无操作消息的Elm表单提交

回答

相关问题