Form <select> with union type

[Simone Vittori]

I'm building a language selector and I'd like to map the options to a union type.

Here's what I tried:

import Json.Decode exposing (Decoder, customDecoder, string)

{-| Currently supported languages. -}

type Language

    = English

    | Japanese

{-| A JSON decoder of Language. -}

languageDecoder : Decoder Language

languageDecoder =

    customDecoder string fromStringLanguage

fromStringLanguage : String -> Result String Language

fromStringLanguage str =

    case str of

        "English" -> Ok English

        "Japanese" -> Ok Japanese

        other -> Err ("Invalid language: " ++ other)

And here's how I'm using it:

-- MODEL

type alias Model = Language

-- UPDATE

type Msg

    = Change Language

update : Msg -> Model -> Model

update msg model =

    case msg of

        Change language -> language

-- VIEW

view : Model -> Html Msg

view model =

    Html.form []

        [ select [ on "change" <| Json.Decode.map Change languageDecoder ]

            (List.map (viewOption model) ["English", "Japanese"])

        ]

It does compile successfully, but when I select another option from the dropdown list, nothing happens. Any ideas?

Is this the right way of decoding a union type?

[Yosuke Torii]

Hi Simone,

I wrote the fixed version here (copy & paste to Try Elm).

Union type was not wrong. The `on` function assumes an event object to be decoded, but you expect a string.

So I used `targetValue` decoder, which is a shortcut for `e.target.value`.

2016年7月28日木曜日 0時25分46秒 UTC+9 Simone Vittori:

[Simone Vittori]

Oh I see! Makes totally sense :)

Thank you very much!