Fable-Elmish - Properly handle forms in F# with SAFE stack

Viewed 186

Context: I am using Fable and Elmish in a website that has a login page with two simple inputs: email and password. It works just fine if the button doesn't have the type submit, but by lacking such I cannot press Return in the form to send it, I have to go and click on it, which wouldn't happen if the element were a submit type.

The problem is: how do I properly handle forms with the SAFE stack? If I add the submit type I need an action in the form to some Route (assuming this would be a dispatch Msg in Elmish), however that makes the browser reload the page with the form as query params and end up stuck in login.

Code example:

form [Class !!classes?form (*; Action <- Should I make a dispatch here?*)] [
    formControl [ HTMLAttr.Required true ] [
        textField [
            HTMLAttr.Label "Example"
            HTMLAttr.Type "email"
            OnInput (fun x -> setExample x.Value) (* Simple hook for managing the state changes *)
            MaterialProp.Value example (* Using material UI, but you may disconsider this *)
        ] []
    ]
    button [
             HTMLAttr.Type "submit"
             OnClick (fun _ ->
                dispatch (Authenticate example) (* <- Here is where I dispatch currently *)
             )
    ] [
        str "Enter"
    ]   
]
0 Answers
Related