forms - 使用 Elm 提交表单而不跟踪字段值

Question

我有一个带有用户名/密码的非常简单的登录表单。有没有办法将此表单发布到服务器并检查 200 秒的响应，而无需通过在用户键入时逐个字符地跟踪每个字段的值所需的编码体操？ (是的，我知道它是 Elm way to do things ，但是在我的模型中添加了两个字段，两个带有更新中伴随条目的 Msg 似乎是一个简单登录表单的大量不需要的代码，并将密码永久存储在模型中似乎是个坏主意。)

我已阅读 these two问题，我找到了 onSubmit事件。但是，我不确定一次该做什么update收到消息 onSubmit事件已触发。我觉得可能有两种前进的方式，我不知道该怎么做:

直接从表单创建 POST 请求并将其发送到服务器

抓取两个字段的值，自己打包发送到服务器。

我会使用默认的提交功能，但我更喜欢使用异步请求登录而不离开页面。

Answer 1

虽然我会在这种情况下做体操，但你可以用 JSON 解码器做另一个体操，从 DOM 获取值并将它们放入消息中。 JSON 解码器允许您使用 JSON 解码器从事件对象中获取任何值，只要它是属性访问而不是方法调用。

另一个技巧是您可以从表单元素中按名称访问输入元素。

import Html exposing (Html)
import Html.Attributes as HA
import Html.Events as HE
import Json.Decode as Json exposing (Decoder)

type Msg
    = SubmitLogin String String

update : Msg -> Model -> Model
update msg model =
    case msg of
        SubmitLogin username password ->
            -- Do AJAX with username and password

decodeField : String -> Decoder String
decodeField name =
    Json.at
        [ "currentTarget"
        , name
        , "value"
        ]
        Json.string

decodeLoginForm : Decoder Msg
decodeLoginForm =
    Json.map2
        SubmitLogin
        (decodeField "username")
        (decodeField "password")

preventDefault : HE.Options
preventDefault =
    { preventDefault = True
    , stopPropagation = False
    }

onLoginSubmit : Html.Attribute Msg
onLoginSubmit =
    HE.onWithOptions
        "submit"
        preventDefault
        decodeLoginForm

view : Model -> Html.Html Msg
view model =
    Html.form
        [ onLoginSubmit ]
        [ Html.input
            [ HA.name "username"
            , HA.type_ "text"
            ]
            []
        , Html.input
            [ HA.name "password"
            , HA.type_ "password"
            ]
            []
        , Html.input
            [ HA.type_ "submit"
            , HA.value "Login"
            ]
            []
        ]