扩展 Elm 教程表单应用程序以包含带编号的输入年龄

Question

我一直在学习这个教程：http://guide.elm-lang.org/architecture/user_input/forms.html

那里的文字对我来说很有意义，我的问题与页面底部列出的练习有关。它要求我：

"Add an additional field for age and check that it is a number."

我对此有困难，因为 onInput 函数似乎只接受字符串输入。我觉得很奇怪 type="number" 输入没有等价物。

然而，这是我的尝试，但没有成功：

import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String exposing (length)

main =
  Html.beginnerProgram { model = model, view = view, update = update }


-- MODEL

type alias Model =
  { name : String
  , password : String
  , passwordAgain : String
  , age : Int
  }


model : Model
model =
  Model "" "" "" 0


-- UPDATE

type Msg
    = Name String
    | Password String
    | PasswordAgain String
    | Age Int

update : Msg -> Model -> Model
update msg model =
  case msg of
    Name name ->
      { model | name = name }

    Password password ->
      { model | password = password }

    PasswordAgain password ->
      { model | passwordAgain = password }

    Age age ->
      { model | age = age }      


-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ input [ type' "text", placeholder "Name", onInput Name ] []
    , input [ type' "password", placeholder "Password", onInput Password ] []
    , input [ type' "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
    , input [ type' "number", placeholder "Age", onInput Age ] []
    , viewValidation model
    ]

viewValidation : Model -> Html msg
viewValidation model =
  let
    (color, message) =
      if model.password /= model.passwordAgain then
        ("red", "Passwords do not match!")
      else if length model.password <= 8 then
        ("red", "Password must be more than 8 characters!")
      else
        ("green", "OK")
  in
    div [ style [("color", color)] ] [ text message ]

我得到的错误如下：

-- TYPE MISMATCH ----------------------------------------------------- forms.elm

The argument to function `onInput` is causing a mismatch.

58|                                                  onInput Age 
                                                             ^^^
Function `onInput` is expecting the argument to be:

    String -> a

But it is:

    Int -> Msg

注意：我知道我可以将年龄输入创建为另一个文本输入，但练习特别要求我检查它是否为“数字类型”。我认为这意味着我应该将它作为 Int 保存在模型中。

我很清楚错误是什么。我只是想知道在 Elm 中解决这个问题的惯用方法。谢谢。

Answer 1

您将需要 onInput 的等价物，但需要对整数进行运算。根据 targetValue 的定义方式，您可以通过添加 Json.Decode.int 将其解析为整数来做类似的事情：

onIntInput : (Int -> msg) -> Attribute msg
onIntInput tagger =
  Html.Events.on "input" (Json.map tagger (Json.at ["target", "value"] Json.int))

然后您可以这样使用它：

, input [ type' "number", placeholder "Age", onIntInput Age ] []

Answer 2

来自 onInput 事件的任何用户输入都是字符串。

您的 Model 期望它是 Int

使用String.toInt从字符串值解析整数值。

调整update函数以将类型转换为Int并将类型签名更改为Age String

Age age ->
    case String.toInt age of
        Ok val ->
            { model | age = val }

        -- Notify the user, or simply ignore the value
        Err err ->
            model

这样您就可以选择通知用户错误。

如果Maybe值更适合你，整个语句可以简化为：

Age age ->
    { model | age =  Result.toMaybe (String.toInt age) }

扩展 Elm 教程表单应用程序以包含带编号的输入年龄

Extending the Elm tutorial form app to include a numbered input Age

elm