NativeForm

Working with form in Elm without storing raw form state in Elm, aka "Use the Platform".

Demo

Checkout the demo at https://nativeform.netlify.app and its source code at example subdirectory.

Getting started

1. Pass the browser document into your Elm app through Flags

       <script>
           var app = Elm.Main.init({
               node: document.getElementById('myapp'),
               flags: {
                   document: document // <-- important!
               }
           })
       </script>

2. Store the document : Json.Encode.Value from your Flags in your Model

3. Wire up any (or many) events, e.g. form [ on "change" OnFormChange ] or input [ onInput (always OnFormChange) ]

4. And call Json.Decode.decodeValue (NativeForm.decoder formId) model.document to get the list of form field name and values.

Notes

1. No matter how many fields you have, you only need one Msg

2. Always give your form an id value

3. Always give your form fields a name value

4. Does not handle input[type=file] in a useful manner; manage file uploads by other means.

5. All user input values are either OneValue String or ManyValues (List String), including input[type=number]; do your own conversion to Int or Time.Posix etc.

6. When using this library, your form id and field names are "stringly typed". You should use a custom type to manage a fixed set of form fields, but this library does not require you to do so.

7. Do not deal with the List (String, Value) returned from NativeForm.decoder. Instead, you should parse them into a value of your desired type. e.g.

   parseDontValidate :
       List ( String, NativeForm.Value )
       -> Result String UserInfo