禁用無操作消息的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表單提交

回答

相關問題