This module is useful if you want to add an Input Form element to your app.
Add a Input.Model to your model.
type alias MyModel =
{ myInput : Input.Model
}
init : Model
Add a Input.Model to your model.
myInitialModel : MyModel
myInitialModel =
{ myInput = Input.init -- optionally pipe into State Setters
}
Internal.Msg
Add a Input.Msg to your Msg.
type MyMsg
= UpdateMyInput Input.Msg
update : Msg -> Model -> Model
Use in your update function.
myUpdate : Msg -> Model -> ( Model, Cmd Msg )
myUpdate msg model =
case msg of
UpdateMyInput inputMsg ->
{ model | myInput = Input.update inputMsg mode.myInput } ! []
view : Model -> View
Transform an Input.Model into an Input.View, which allows us to pipe View Setters on it.
myView : Model -> Html Msg
myView model =
div
[]
[ Input.view model.myInput -- pipe view setters here, for example |> setIsLocked 'your logic here'
]
render : View -> Html.Styled.Html Msg
Transforms an Input.View into Html Input.Msg
myView : Model -> Html Msg
myView model =
div
[]
[ Input.view model.myInput
|> Input.render
|> Html.map UpdateMyInput
]
reInitialise : Model -> Model
ReInitialise your Input.Model.
reset : Model -> Model
Reset your Input.Model.
setInitialValue : String -> Model -> Model
Set the initial value of your Input.Model.
setValue : String -> Model -> Model
Change the value of your Input.Model.
setPlaceholder : String -> View -> View
Set a placeholder for your input.
setMaxLength : Basics.Int -> View -> View
Set the max length for your input string.
setIsError : Basics.Bool -> View -> View
Set whether your input is in error mode (red border).
setIsLocked : Basics.Bool -> View -> View
Set whether your input is locked (disabled).
setId : String -> View -> View
Give your input an id. Can be useful for DOM selectors (focus, WebComponents etc.)
setTextType : View -> View
Set the type_ of your input to "text"
setEmailType : View -> View
Set the type_ of your input to "email"
setPasswordType : View -> View
Set the type_ of your input to "password"
setTelType : View -> View
Set the type_ of your input to "tel"
setNumberType : View -> View
Set the type_ of your input to "number"
getInitialValue : Model -> String
Get the initial value of your input.
getValue : Model -> String
Get the current value of your input. This is what you'd use to display the data somewhere outside of your input, or to send the data to the backend for example etc.
getIsChanged : Model -> Basics.Bool
Whether your input was changed. Useful if you want to disable save buttons unless there were changes etc.
getId : View -> Maybe String
Useful if you need the id of the input in your update function, so set focus etc.