This module provides helpers to render a Form
.
{ values : values
, state : State
, errorTracking : ErrorTracking
}
This type gathers the values of the form, with some exposed state and internal view state that tracks which fields should show validation errors.
Represents the state of the form.
You can change it at will from your update
function. For example, you can set the state to
Loading
if submitting the form fires a remote action, or you can set it to Error
when
such action fails.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
FormChanged newModel ->
( { newModel | state = FormView.Idle }, Cmd.none )
SignUp email password ->
( { model | state = FormView.Loading }
, User.signUp email password
|> Task.attempt SignupTried
)
SignupTried (Ok user) ->
( { model | state = FormView.Success "You are now registered successfully :)" }, Route.navigate (Route.Profile user.slug) )
SignupTried (Err error) ->
( { model | state = FormView.Error error }, Cmd.none )
idle : values -> Model values
Create a Model
representing an idle form.
You just need to provide the initial values
of the form.
{ onChange : Model values -> msg
, action : String
, loading : String
, validation : Validation
}
This allows you to configure the view output.
onChange
specifies the message that should be produced when the Model
changes.action
is the text of the submit button when the form is not loading.loading
is the text of the submit button when the form is loading.validation
lets you choose the validation strategy.The validation strategy.
ValidateOnSubmit
will show field errors only when the user tries to submit an invalid form.ValidateOnBlur
will show field errors as fields are blurred. It uses field labels to identify fields on the form. This validation strategy will not work as expected if your form has multiple fields with the same label.toHtml : ViewConfig values msg -> Ant.Form.Form values msg -> Model values -> Html msg
Render a form as HTML!
FormView.toHtml
{ onChange = FormChanged
, action = "Log in"
, loading = "Logging in..."
, validation = FormView.ValidateOnSubmit
}
loginForm
model