Elm Formen onInput Verwendung mit Zahlen

Question

onInput funktioniert gut, wenn mein Modell vom Typ String ist. Allerdings, wenn ich den Benutzer möchte ein Int onInput gibt mir die folgende Fehlermeldung ein:

Function `onInput` is expecting the argument to be: 
     String -> msg 
    But it is: 
     Int -> Msg 

Dies ist mein Code unten

view : Model -> Html Msg 
view model = 
    div [] 
     [ input [type_ "text", placeholder "Id", onInput Msgs.NewPlayerId] [] 
     , input [type_ "text", placeholder "Name", onInput Msgs.NewPlayerName ] [] 
     , input [type_ "number", placeholder "Level", onInput Msgs.NewPlayerLevel ] [] 
     , button [ onClick Msgs.Submit ] [ text "submit" ] 
     ] 

Gibt es in Variation von onInput den eingebauten Ints oder Floats akzeptiert?

Answer 1

Wenn Sie Msgs.NewPlayerLevel neu definieren ein Result String Int zu akzeptieren für die Tatsache zu berücksichtigen, dass ein Spieler etwas nicht-numerisch eingeben könnte, könnten Sie dies tun:

type Msg 
    = ... 
    | NewPlayerLevel (Result String Int) 

und Ihr onInput Anruf wäre:

onInput (NewPlayerLevel << String.toInt) 

Das gleiche könnte mit String.toFloat erfolgen.

In der update Funktion werden Sie

update msg model = 
    case msg of 
    ... 

    NewPlayerLevel (Ok level) -> 
     { model | level = Just level, levelError = Nothing } 

    NewPlayerLevel (Err err) -> 
     { model | level = Nothing, levelError = Just err } 

beide der Ok und Err Fällen für Ihren neuen Nachrichtentyp handhaben, die Ihnen diese Neben der Lösung

type alias Model = 
    { ... 
    , level : Maybe Int 
    , levelError : Maybe String 
    } 

Answer 2

zur Verfügung gestellt haben ein Modell geht davon aus durch @ chad-gilbert, Sie können auch eine Funktion String -> Msg bereitstellen, die je nach Ergebnis unterschiedliche Msg s sendet. Zum Beispiel:

type Msg 
    = ... 
    | NewPlayerLevel Int 
    | IncorrectInput String 

newPlayerLevelInput : String -> Msg 
newPlayerLevelInput input = 
    case String.toInt input of 
     Ok int -> NewPlayerLevel int 
     Err error -> IncorrectInput error 

In Ihrer input Funktion würden Sie onInput newPlayerLevelInput als Attribut verwenden.