Code

Code to generate a form with two input fields as shown at the end of the page. Note that in this example both the State and the Configuration of the form are stored in the form. Unless you need to change the configuration during the life of the form (unlikely) or unless you receive the configuration from a server, you can store only the State into the model and hard code the Configuration somewhere else in your code.

Consider also that changing the configuration does not re-run all validations.

type alias Model =
    { form : R10.Form.Form }


init : a -> b -> ( Model, Cmd msg1, Cmd msg2 )
init _ _ =
    ( { form =
            { conf =
                [ R10.Form.entity.field
                    { id = "email"
                    , type_ = TypeText TextEmail
                    , label = "Email"
                    , helperText = Just "Helper text for Email"
                    , required = True
                    , minLength = Just 5
                    , maxLength = Just 50
                    , regexValidations = R10.Form.Validation.commonValidation.email
                    }
                , R10.Form.entity.field
                    { id = "password"
                    , type_ = R10.FormTypes.inputField.textPasswordNew
                    , label = "Password"
                    , helperText = Just "Helper text for Password"
                    , required = True
                    , minLength = Just 8
                    , maxLength = Just 128
                    , regexValidations = R10.Form.Validation.commonValidation.password
                    }
                ]
            , state = R10.Form.State.init
            }
      }
    , Cmd.none
    , Cmd.none
    )


type Msg
    = MsgForm R10.Form.Msg




save : Model -> Shared.Model -> Shared.Model
save model shared =
    shared


load : Shared.Model -> Model -> ( Model, Cmd Msg )
load shared model =
    ( { model| theme = shared.theme },Cmd.none )
update: Spa.Types.PageContext Generated.Routes.Route GlobalModel.Model -> Msg -> Model -> ( Model, Cmd Msg, Cmd GlobalMsg.Msg )
update { global } msg model =
    case msg of
        MsgForm formMsg ->
            let
                form =
                    model.form
            in
            ( { model | form = { form | state = R10.Form.update formMsg form.state } }, Cmd.none, Cmd.none )


view : Spa.Types.PageContext Generated.Routes.Route GlobalModel.Model -> Model -> Element Msg
view { global } model =
    let
        viewForm =
            R10.Form.view
                model.form
                MsgForm
                R10.Form.Maker.maker

        viewCTA =
            Element.map MsgForm <|
                Input.button
                    R10.Button.cta
                    { label = text "Submit"
                    , onPress = Just <| R10.Form.Msg.Submit model.form.conf
                    }
    in
    column
        [ spacing 30
        , width (fill |> maximum 500)
        , centerX
        ]
        (viewForm ++ [ viewCTA ])

Result