Represents the Form configuration.

Represents the type of group which can wrap a form field. Used to add a boxed icon in a form field (for instance the calendar icon of the datepicker).

A list in which each item represents a row of the form. Each row has is own list of fields (FormField model msg) which will be rendered by the mapper function (FormField model msg -> List (Html msg)).

Alias for String. Useful to have easy-to-read signatures.

Alias for String. Useful to have easy-to-read signatures.

Alias for String. Useful to have easy-to-read signatures.

Utility function to create a FormRenderer instance

Creates an empty, pristine form.

Add rows of fields to the form.

--
import Prima.Pyxis.Form as Form
import Prima.Pyxis.Form.Event as Event


...


type alias Model =
    { data : FormData
    , form : Form FormData Msg
    }


type alias FormData =
    { username : Maybe String
    }


type Msg
    = UpdateUsername (Maybe String)


...


usernameConfig : FormField FormData Msg
usernameConfig =
    Form.textConfig
        "username"
        (Just "Username")
        [ minlength 3, maxlength 12 ]
        .username
        [ Event.onInput UpdateUsername ]
        [ NotEmpty "Username must not be blank."
        ]


...


view : Model -> Html Msg
view ({ form, data } as model) =
    form
        |> Form.addFields [( Form.renderField form data, usernameConfig )]
        |> Form.render

Sets the form to Pristine state.

Sets the form to Touched state.

Sets the form to Submitted state. When submitted the form will eventually show errors.

Represents the configuration of a single form field.

Creates an input text field. This field can handle only onInput, onFocus, onBlur events. Other events will be ignored.

--
import Prima.Pyxis.Form as Form exposing (FormField)
import Prima.Pyxis.Form.Event as Event


...


type alias Msg
    = OnInput (Maybe String)
    | OnFocus
    | OnBlur


type alias Model =
    { username : Maybe String }


...


usernameConfig : FormField Model Msg
usernameConfig =
    Form.textConfig
        "username"
        (Just "Username")
        [ minlength 3, maxlength 12 ]
        .username
        [ Event.onInput OnInput
        , Event.onFocus OnFocus
        , Event.onBlur OnBlur
        ]
        [ NotEmpty "Empty value is not acceptable."
        ]

Creates a password text field. Same configuration as textConfig.

Creates a texarea field. Same configuration as textConfig.

Creates a checkbox field. This field can handle only onCheck event. Other events will be ignored.

--
import Prima.Pyxis.Form as Form exposing (FormField, Label, Slug, CheckboxOption)
import Prima.Pyxis.Form.Event as Event


...


type alias Msg
    = OnCheck ( Slug, Bool )


type alias Model =
    { country : Maybe String
    , countries: List (Label, Slug, Bool)
    }


...


countries : Model -> FormField Model Msg
countries model =
    let
        reader : (Model -> List (Slug, Bool))
        reader =
            (List.map (\( _, slug, checked ) -> ( slug, checked )) << .countries)


        options : List CheckboxOption
        options =
            List.map (( label, slug, isChecked ) -> Form.checkboxOption label slug isChecked) model.countries
    in
    Form.checkboxConfig
        "countries"
        (Just "Countries")
        []
        reader
        [ Event.onCheck OnCheck ]
        options
        []

Creates a radio option.

Creates a radio field. This field can handle only onSelect event. Other events will be ignored.

--
import Prima.Pyxis.Form as Form exposing (FormField, RadioOption)
import Prima.Pyxis.Form.Event as Event


...


type alias Msg
    = OnSelect (Maybe String)


type alias Model =
    { gender : Maybe String }


...


genderConfig : FormField Model Msg
genderConfig =
    let
        options : List RadioOption
        options =
            [ Form.radioOption "Male" "male", Form.radioOption "Female", "female" ]
    in
    Form.radioConfig
        "gender"
        (Just "Gender")
        []
        .gender
        [ Event.onSelect OnSelect ]
        options
        []

Creates a radio option.

Creates a select field. This field is a custom component on desktop devices. It fallbacks to a native Html Select tag on mobile devices. Infact we need to express isDisabled flag as an Html Attribute and also as a parameter for this method.

This field can handle only onToggle, onInput, onSelect, onFocus and onBlur events. Other events will be ignored.

--
import Prima.Pyxis.Form as Form exposing (FormField, Label, Slug, SelectOption)
import Prima.Pyxis.Form.Event as Event
import Html.Attributes
...


type alias Msg
    = OnInput (Maybe String)
    | OnToggle
    | OnSelect (Maybe String)
    | OnFocus
    | OnBlur


type alias Model =
    { city : Maybe String
    , isOpen : Bool
    , isDisabled : Bool
    }


...


cities : Model -> FormField Model Msg
cities model =
    let
        options : List SelectOption
        options =
            [ Form.selectOption "Milan" "MI", Form.selectOption "Turin" "TO", Form.selectOption "Rome" "RO" ]
    in
    Form.selectConfig
        "city"
        (Just "City")
        model.isDisabled
        model.isOpen
        (Just "Select a city")
        [ Html.Attributes.disabled model.isDisabled ]
        .city
        [ Event.onToggle OnToggle, Event.onInput OnInput, Event.onSelect OnSelect, Event.onFocus, Event.onBlur ]
        options
        [ NotEmpty "Empty value is not acceptable." ]

Creates a select option.

Creates a datepicker field. This field can handle only onInput event. Other events will be ignored.

--
import Prima.Pyxis.Form as Form exposing (FormField)
import Prima.Pyxis.Form.Event as Event
import Prima.Pyxis.DatePicker as DatePicker
...


type alias Msg
    = OnInput (Maybe String)
    | OnDatePickerChange DatePicker.Msg


type alias Model =
    { datePicker : DatePicker.Model
    , birthDate : Maybe String
    , isDatePickerOpen : Bool
    }


...


dateOfBirth : Model -> FormField Model Msg
dateOfBirth model =
    Form.datepickerConfig
        "birthdate"
        (Just "Date of Birth")
        []
        .birthDate
        OnDatePickerChange
        [ Event.onInput OnInput ]
        model.datePicker
        model.isDatePickerOpen
        []

Creates an autocomplete field. This field can handle only onSelect, onAutocompleteFilter, onFocus and onBlur events. Other events will be ignored.

--
import Prima.Pyxis.Form as Form exposing (FormField)
import Prima.Pyxis.Form.Event as Event
import Tuple
...


type alias Msg
    = OnSelect (Maybe String)
    | OnFilter (Maybe String)


type alias Model =
    { empireFilter : Maybe String
    , empire : Maybe String
    , isOpen : Bool
    }


...


empire : Model -> FormField Model Msg
empire model =
    let
        filter : String
        filter =
            Maybe.withDefault "" model.empireFilter


        options : List AutocompleteOption
        options =
            [ ("Roman Empire", "roman")
            , ("Ottoman Empire", "ottoman")
            , ("French Empire", "french")
            , ("British Empire", "british")
            ]
            |> List.filter (String.contains filter << Tuple.first)
            |> List.map (\(label, slug) -> Form.autocompleteOption label slug)
    in
    Form.autocompleteConfig
        "empire"
        (Just "empire")
        model.isOpen
        (Just "No results")
        []
        .empireFilter
        .empire
        [ Event.onAutocompleteFilter OnFilter, Event.onSelect OnSelect ]
        options
        []

Creates an autocomplete option.

Creates a pure html field. No events accepeted.

--
import Prima.Pyxis.Form as Form exposing (FormField)


...


loremIpsum : FormField Model Msg
loremIpsum =
    Form.pureHtmlConfig [ text "Lorem ipsum dolor sit amet" ]

Check if a FormField is valid

Check if a FormField is pristine

Renders a form with all it's fields. Requires a Form model msg created via Form.init and Form.addFields.

Renders a field by receiving the Form and the FormField configuration.

--
import Html exposing (Html)
import Prima.Pyxis.Form as Form exposing (Form, FormField)
import FieldConfig exposing (usernameConfig)


...


type Msg
    = OnInput (Maybe String)


type alias Model =
    { form : Form FormData Msg
    , data : FormData
    }


type alias FormData =
    { username: Maybe String
    }


...


view : Model -> Html Msg
view model =
    ( Form.renderField model.form model.data, [ usernameConfig ] )
        |> Form.render model.form

Renders a field by receiving the Form, the FormFieldGroup, and the FormField configuration. Useful to build a field with an icon to the left (prepend), or to the right (append). You can pass any html to this function, but be careful, UI can be broken.

--
import Html exposing (Html, i)
import Html.Attributes exposing (class)
import Html.Events exposing (onClick)
import Prima.Pyxis.Form as Form exposing (Form, FormField)
import FieldConfig exposing (datePickerConfig)


...


type Msg
    = ToggleDatePicker


type alias Model =
    { form : Form FormData Msg
    , data : FormData
    }


type alias FormData =
    { birthDate: Maybe String
    }


...


datePickerIcon : Html Msg
datePickerIcon =
    i
        [ class "a-icon a-icon-calendar cBrandAltDark"
        , onClick ToggleDatePicker
        ]


view : Model -> Html Msg
view model =
    ( Form.renderFieldWithGroup model.form model.data <| Form.appendGroup [ datePickerIcon ], [ datePickerConfig ] )
        |> Form.render model.form

Represents an html which prepends to the form field.

Represents an html which appends to the form field.