supermacro / elm-antd / Ant.Form.View

This module provides helpers to render a Form.

Model


type alias Model values =
{ 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.


type State
    = Idle
    | Loading
    | Error String
    | Success

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.

Configuration


type alias ViewConfig values msg =
{ onChange : Model values -> msg
, action : String
, loading : String
, validation : Validation 
}

This allows you to configure the view output.


type Validation
    = ValidateOnSubmit
    | ValidateOnBlur

The validation strategy.

Rendering the form

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