This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Utility for guarded text input fields: only valid (or WiP) text is allowed
version 1.0.0
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.0.0
Committed At 2017-09-28 21:51:30 UTC
elm-lang/html 2.0.0 <= v < 3.0.0 2.0.0
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1

README

Guarded input controls

Guarded here means that the input control is simply not allowed to contain any erroneous string. This is solved by normalization of the input control's content model on every input event and by feeding back the normalized model to the view of the input control.

Potentially handy in educational software, where one does not want to confuse kids with explanations of badly formed input and such like.

A guarded input can be in one of three acceptable states:

  • undefined (empty input control),
  • work-in-progress (not convertible to a useful value, but could evolve potentially into one), and
  • valid (has actual value).

If the Guarded.Input.update function rejects a change of the input contents, the previous state - necessarily an accepted one - is preserved, and that is the model to write back to the view, and this way erroneous attempts will be just discarded.

Example for a guarded input control accepting integers

Note that this library decidedly deals with input controls of text type. No spinners, for instance.

type alias Model =
    { parsedInteger : Guarded.Input.Model Int
    , ...
    }

type Msg
    = IntegerChanged (Guarded.Input.Msg Int)
    | ...

view : Model -> Html Msg
view model =
    ...
    input
        [ Guarded.Input.parseOnInput IntegerChanged Guarded.Input.Parsers.intParser
        , value <| Guarded.Input.inputString model.parsedInteger
        , classList <| classListForInput myClasses model.parsedInteger
        ]
        []
    ...

myClasses : List ( String, Guarded.Input.CssUtil.Purpose )
myClasses =
    [ ( "guarded-input-valid", Guarded.Input.CssUtil.Valid )
    , ( "guarded-input-work-in-progress", Guarded.Input.CssUtil.WorkInProgress )
    , ( "guarded-input-undefined", Guarded.Input.CssUtil.Undefined )
    ]

Check the source for a demo appliciation.