dillonkearns / elm-form / Form.FieldView


type alias Input =
Internal.Input.Input

The type for a Field that can be rendered using input or inputStyled.


type alias Options a =
Internal.Input.Options a

The type for a Field that represents a set of options.

Can be rendered as a dropdown:

Or as a set of radio buttons:

input : List (Html.Attribute msg) -> Form.Validation.Field error parsed Input -> Html msg

Renders the Field to Html.

These Fields are defined using Form.Field using functions like Form.Field.text, Form.Field.textarea, Form.Field.int, and Form.Field.date.

This will render a form field HTML element with all of the appropriate attributes.

Often it's convenient to create a helper function that adds labels and renders the field's error messages with any styles and layout conventions in your application.

fieldView :
    Form.Context String input
    -> String
    -> Validation.Field String parsed FieldView.Input
    -> Html msg
fieldView context label field =
    Html.div []
        [ Html.label []
            [ Html.text (label ++ " ")
            , FieldView.input [] field
            , errorsView context field
            ]
        ]

errorsView :
    Form.Context String input
    -> Validation.Field String parsed kind
    -> Html msg
errorsView { submitAttempted, errors } field =
    if submitAttempted || Validation.statusAtLeast Validation.Blurred field then
        errors
            |> Form.errorsForField field
            |> List.map (\error -> Html.li [ Html.Attributes.style "color" "red" ] [ Html.text error ])
            |> Html.ul []

    else
        Html.ul [] []

radio : List (Html.Attribute msg) -> (option -> (List (Html.Attribute msg) -> Html msg) -> Html msg) -> Form.Validation.Field error parsed2 (Options option) -> Html msg

Render an Options Field as a set of radio elements.

Radio buttons are highly customizable. Even more so than dropdowns (<select> elements) because you can render HTML for each entry rather than just text.

To render using this radio function, you pass in

Example:

import Form.FieldView as FieldView
import Html

type Size
    = Small
    | Medium
    | Large

dropdownView field =
    Html.div []
        [ FieldView.radio []
            (\size toRadio ->
                Html.div []
                    [ Html.label []
                        [ Html.text (sizeToString size)
                        , toRadio []
                        ]
                    ]
            )
            field
        ]

sizeToString : Size -> String
sizeToString size =
    case size of
        Small ->
            "Small"

        Medium ->
            "Medium"

        Large ->
            "Large"


type alias Hidden =
Internal.Input.Hidden

There are no render helpers for hidden fields because the Form.renderHtml helper functions automatically render hidden fields for you.

select : List (Html.Attribute msg) -> (parsed -> ( List (Html.Attribute msg), String )) -> Form.Validation.Field error parsed2 (Options parsed) -> Html msg

Render an Options field as a select element.

import Form.FieldView as FieldView

type Size
    = Small
    | Medium
    | Large

dropdownView field =
    FieldView.select []
        (\size ->
            ( -- we can optionally add HTML attributes here
              []
            , sizeToString size
            )
        )
        field

sizeToString : Size -> String
sizeToString size =
    case size of
        Small ->
            "Small"

        Medium ->
            "Medium"

        Large ->
            "Large"

valueButton : String -> List (Html.Attribute msg) -> List (Html msg) -> Form.Validation.Field error parsed kind -> Html msg

Gives you a submit button that will submit the form with a specific value for the given Field.

Html.Styled Helpers

radioStyled : List (Html.Styled.Attribute msg) -> (parsed -> (List (Html.Styled.Attribute msg) -> Html.Styled.Html msg) -> Html.Styled.Html msg) -> Form.Validation.Field error parsed2 (Options parsed) -> Html.Styled.Html msg

Same as radio, but renders to Html.Styled.

selectStyled : List (Html.Styled.Attribute msg) -> (parsed -> ( List (Html.Styled.Attribute msg), String )) -> Form.Validation.Field error parsed2 (Options parsed) -> Html.Styled.Html msg

Same as select, but renders to Html.Styled.

inputStyled : List (Html.Styled.Attribute msg) -> Form.Validation.Field error parsed Input -> Html.Styled.Html msg

Same as input, but renders to Html.Styled.

valueButtonStyled : String -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Form.Validation.Field error parsed kind -> Html.Styled.Html msg

Gives you a submit button that will submit the form with a specific value for the given Field.