PackagesReroutesAboutlamdera.com

primait/forms/2.0.1

READMEAboutVersionsSourceModules

Prima.Form

Package to build a Form using Prima Assicurazioni's Design System.

In order to keep the configuration as simple as possible we decided to not allow CSS classes to be changed, also forcing consistency in our ecosystem.

Definition

type FormField model msg

Defines a Field component for a generic form. Opaque implementation.

type FormFieldConfig model msg

Defines a configuration for a Field component. Opaque implementation.

type Validation model
= NotEmpty String
| Expression Regex String
| Custom (model -> Bool) String

Validation rules for a FormField.

NotEmpty "This field cannot be empty."


Expression (Regex.regex "^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\\.[a-zA-Z0-9-.]+$") "Insert a valid email."


Custom (\model -> always True) "This error message will never be shown."

Basic components configuration

String
-> Maybe String
-> List (Attribute msg)
-> (model -> Maybe String)
-> (Maybe String -> msg)
-> msg
-> msg
-> Bool
-> Maybe Int
-> List (Validation model)
-> FormField model msg

Input Text configuration method.

import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...


type Msg
    = OnInputUsername (Maybe String)
    | OnFocusUsername
    | OnBlurUsername
    ...


type alias Model =
    { username : Maybe String
    ...
    }


usernameConfig : FormField Model Msg
usernameConfig  =
    textConfig
        "username"
        "Username:"
        [ minlength 3, maxlength 12, disabled False ]
        .username
        OnInputUsername
        OnFocusUsername
        OnBlurUsername
        alwaysShowErrors
        Nothing
        [ NotEmpty "Empty value is not acceptable."
        , Custom ((<=) 3 << String.length << Maybe.withDefault "" << .username) "Value must be between 3 and 12 characters length."
        ]
String
-> Maybe String
-> List (Attribute msg)
-> (model -> Maybe String)
-> (Maybe String -> msg)
-> msg
-> msg
-> Bool
-> Maybe Int
-> List (Validation model)
-> FormField model msg

Input password configuration method. See textConfig for configuration options.

String
-> Maybe String
-> List (Attribute msg)
-> (model -> Maybe String)
-> (Maybe String -> msg)
-> msg
-> msg
-> Bool
-> Maybe Int
-> List (Validation model)
-> FormField model msg

Textarea configuration method. See textConfig for configuration options.

String
-> Maybe String
-> List (Attribute msg)
-> (model -> Bool)
-> (Bool -> msg)
-> msg
-> msg
-> Bool
-> Maybe Int
-> List (Validation model)
-> FormField model msg

Checkbox with single option configuration method.

import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...


type Msg
    = OnChangePrivacy Bool
    | OnFocusPrivacy
    | OnBlurPrivacy
    ...


type alias Model =
    { privacy : Bool
    ...
    }


...
acceptPrivacyConfig : FormField Model Msg
acceptPrivacyConfig =
    Form.checkboxConfig
        "privacy"
        "Do you accept our Privacy Policy?"
        []
        .privacy
        OnChangePrivacy
        OnFocusPrivacy
        OnBlurPrivacy
        alwaysShowErrors
        Nothing
        []
type alias CheckboxOption =
{ label : String
, slug : String
, isChecked : Bool
}

Describes an option for a Checkbox

[ CheckboxOption "Italy" "ita" True
, CheckboxOption "France" "fra" False
, CheckboxOption "Spain" "spa" True
]
String
-> Maybe String
-> List (Attribute msg)
-> (model -> List ( String, Bool ))
-> (String -> Bool -> msg)
-> msg
-> msg
-> List CheckboxOption
-> Bool
-> Maybe Int
-> List (Validation model)
-> FormField model msg

Checkbox with multiple option configuration method.

import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...


type Msg
    = OnChangeVisitedCountries String Bool
    | OnFocusVisitedCountries
    | OnBlurVisitedCountries
    ...


type alias Model =
    { visitedCountries : List (String, String, Bool)
    ...
    }


...
visitedCountriesConfig : List ( String, String, Bool ) -> FormField Model Msg
visitedCountriesConfig options =
    Form.checkboxWithOptionsConfig
        "visited_countries"
        "Visited countries"
        []
        (List.map (\( label, slug, checked ) -> ( slug, checked )) << .visitedCountries)
        OnChangeVisitedCountries
        OnFocusVisitedCountries
        OnBlurVisitedCountries
        (List.map (\( label, slug, checked ) -> CheckboxOption label slug checked) options)
        alwaysShowErrors
        Nothing
        []
type alias SelectOption =
{ label : String
, slug : String
}

Describes an option for a Select

[ SelectOption "Italy" "ita"
, SelectOption "France" "fra"
]
String
-> Maybe String
-> Bool
-> Bool
-> Maybe String
-> List (Attribute msg)
-> (model -> Maybe String)
-> (Bool -> msg)
-> (Maybe String -> msg)
-> msg
-> msg
-> List SelectOption
-> Bool
-> Maybe Int
-> List (Validation model)
-> FormField model msg

Select configuration method.

import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...


type Msg
    = OnChangeCity (Maybe String)
    | OnFocusCity
    | OnBlurCity
    | ToggleCity
    ...


type alias Model =
    { city : Maybe String
    , isOpenCitySelect : Bool
    , isDisabledCity: Bool
    ...
    }


...


cityConfig : Bool -> Bool -> FormField Model Msg
cityConfig isDisabledCity isOpenCitySelect =
    Form.selectConfig
        "city"
        "City"
        isDisabledCity
        isOpenCitySelect
        (Just "Select any option")
        []
        .city
        ToggleCity
        OnChangeCity
        OnFocusCity
        OnBlurCity
        (List.sortBy .label [ SelectOption "Milan" "MI" , SelectOption "Turin" "TO" , SelectOption "Rome" "RO" , SelectOption "Naples" "NA" , SelectOption "Genoa" "GE" ] )
        alwaysShowErrors
        Nothing
        [ NotEmpty "Empty value is not acceptable." ]
type alias RadioOption =
{ label : String
, slug : String
}

Describes an option for a Radio

[ RadioOption "Italy" "ita" True
, RadioOption "France" "fra" False
, RadioOption "Spain" "spa" True
]
String
-> Maybe String
-> List (Attribute msg)
-> (model -> Maybe String)
-> (Maybe String -> msg)
-> msg
-> msg
-> List RadioOption
-> Bool
-> Maybe Int
-> List (Validation model)
-> FormField model msg

Input Radio configuration method.

import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...


type Msg
    = OnChangeGender (Maybe String)
    | OnFocusGender
    | OnBlurGender
    ...


type alias Model =
    { gender : Maybe String
    ...
    }


genderConfig : FormField Model Msg
genderConfig =
    Form.radioConfig
        "gender"
        "Gender"
        []
        .gender
        OnChangeGender
        OnFocusGender
        OnBlurGender
        alwaysShowErrors
        [ RadioOption "Male" "male" , RadioOption "Female" "female" ]
        Nothing
        [ Custom ((==) "female" << Maybe.withDefault "female" << .gender) "You must select `Female` to proceed." ]

Custom components configuration

type alias AutocompleteOption =
{ label : String
, slug : String
}

Describes an option for an Autocomplete

[ AutocompleteOption "Italy" "ita"
, AutocompleteOption "France" "fra"
]
String
-> Maybe String
-> Bool
-> Maybe String
-> List (Attribute msg)
-> (model -> Maybe String)
-> (model -> Maybe String)
-> (Maybe String -> msg)
-> (Maybe String -> msg)
-> msg
-> msg
-> List AutocompleteOption
-> Bool
-> Maybe Int
-> List (Validation model)
-> FormField model msg

Autocomplete configuration method.

import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...


type Msg
    = OnSelectCountry (Maybe String)
    | OnFilterCountry (Maybe String)
    | OnFocusCountry
    | OnBlurCountry
    ...


type alias Model =
    { country : Maybe String
    , countryFilter : Maybe String
    , isOpenCountryAutocomplete: Bool
    ...
    }


...


countryConfig : Bool -> Maybe String -> FormField Model Msg
countryConfig isOpenCountryAutocomplete countryFilter =
    let
        lowerFilter =
            (String.toLower << Maybe.withDefault "") countryFilter
    in
    Form.autocompleteConfig
        "country"
        "Country"
        isOpenCountry
        (Just "No results")
        []
        .countryFilter
        .country
        OnFilterCountry
        OnSelectCountry
        OnFocusCountry
        OnBlurCountry
        alwaysShowErrors
        (List.filter (String.contains lowerFilter << String.toLower << .label) <| [ AutocompleteOption "Italy" "ITA", AutocompleteOption "Brasil" "BRA", AutocompleteOption "France" "FRA", AutocompleteOption "England" "ENG", AutocompleteOption "USA" "USA", AutocompleteOption "Japan" "JAP" ])
        Nothing
        [ NotEmpty "Empty value is not acceptable." ]
String
-> Maybe String
-> List (Attribute msg)
-> (model -> Maybe String)
-> (Maybe String -> msg)
-> (Msg -> msg)
-> msg
-> msg
-> Model
-> Bool
-> Bool
-> Maybe Int
-> List (Validation model)
-> FormField model msg

Datepicker configuration method.

import DatePicker
import Date.Format
import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...


type Msg
    = OnInputBirthDate (Maybe String)
    | OnFocusBirthDate
    | OnBlurBirthDate
    | OnChangeBirthDateDatePicker DatePicker.Msg
    ...


type alias Model =
  { dateOfBirth : Maybe String
  , dateOfBirthDP: DatePicker.Model
  ...
  }


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
      OnChangeBirthDateDatePicker dpMsg ->
          let
              updatedInstance =
                  DatePicker.update dpMsg model.dateOfBirthDP
          in
          { model | dateOfBirthDP = updatedInstance, dateOfBirth = (Just << Date.Format.format "%d/%m/%Y" << DatePicker.selectedDate) updatedInstance } ! []
      ...

Static components configuration

pureHtmlConfig : List (Html msg) -> FormField model msg

Static Html configuration method.

import Prima.Form as Form exposing (FormField, FormFieldConfig, Validation(..))
...


staticHtmlConfig : List (Html Msg) -> FormField Model Msg
staticHtmlConfig content =
  Form.pureHtmlConfig content

Render a FormField

render : model -> FormField model msg -> List (Html msg)

Method for rendering a FormField

renderWithGroup : List (Html msg) -> model -> FormField model msg -> List (Html msg)

Method for rendering a FormField adding a div which wraps the form field.

wrapper : List (Html msg) -> Html msg

Wrapper for a FormField rendered with render function.

Check status of a FormField

isValid : model -> FormField model msg -> Bool

Validate a FormField.

isValid model usernameConfig
isPristine : model -> FormField model msg -> Bool

Checks the pristine status of a FormField.

isPristine model usernameConfig

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera