Skip to content

Commit

Permalink
elm bump
Browse files Browse the repository at this point in the history
  • Loading branch information
choonkeat committed May 7, 2022
1 parent 7eedba7 commit aeba4af
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 19 deletions.
29 changes: 14 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,33 +15,32 @@ After
1. Use `defaultValue someValue` to set form field value when we render a form (e.g. edit form)
- no longer obliged to keep `someValue` in sync with user's input
1. Use `NativeForm.decoder` anytime to retrieve the form values from browser [`document.forms`](https://developer.mozilla.org/en-US/docs/Web/API/Document/forms)
- No need for `onInput` nor a `msg` for every form field
- Only do ☝️ for fields that really need handling (not requiring it to be done for all form fields)
- But forms need an `id`, form fields need a `name`
- No need for `onInput` nor a `msg` for every form field; only do so for fields that really need handling
- But forms must be given the `id` attribute and form fields must be given a `name` attribute

### Demo
## Demo

Checkout the demo at https://nativeform.netlify.app and its source code at [example](https://github.com/choonkeat/nativeform/blob/main/example/src/Main.elm) subdirectory.

### Getting started
## Getting started

1. Pass the browser `document.forms` into your Elm app through [Flags](https://guide.elm-lang.org/interop/flags.html)

```diff
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp'),
flags: {
documentForms: document.forms // <-- important!
}
})
</script>
<script>
var app = Elm.Main.init({
node: document.getElementById('myapp'),
flags: {
documentForms: document.forms // <-- important!
}
})
</script>
```
1. Store the `documentForms : Json.Encode.Value` from your `Flags` in your `Model`
1. Wire up any (or many) events, e.g. `form [ on "change" OnFormChange ]` or `input [ onInput (always OnFormChange) ]`
1. And call `Json.Decode.decodeValue (NativeForm.decoder formId) model.documentForms` to get the list of form field name and values.

### Notes
## Notes

1. No matter how many fields you have, you only need one `Msg`
1. Always give your form an `id` value
Expand All @@ -57,4 +56,4 @@ Checkout the demo at https://nativeform.netlify.app and its source code at [exam
-> Result String UserInfo
```

See a [sample `parseDontValidate` implementation](https://github.com/choonkeat/nativeform/blob/main/example/src/Main.elm#L471-L472)
See a [sample `parseDontValidate` implementation](https://github.com/choonkeat/nativeform/blob/main/example/src/Main.elm#L529-L544)
2 changes: 1 addition & 1 deletion elm.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"name": "choonkeat/nativeform",
"summary": "Elm library to use form state from the platform",
"license": "MIT",
"version": "2.0.0",
"version": "2.1.0",
"exposed-modules": [
"NativeForm"
],
Expand Down
7 changes: 4 additions & 3 deletions src/NativeForm.elm
Original file line number Diff line number Diff line change
Expand Up @@ -245,8 +245,9 @@ form values from the browser `document.forms` and into a List of key values.
)
We are returning a `List` instead of `Dict` because on form submit, duplicate
names are preserved. So we are preserving them here too. If a `Dict` is desired,
use the [`valuesDict`](#valuesDict) helper function
names are preserved. So we are preserving them here too.
If a `Dict` is desired, pipe to the [`valuesDict`](#valuesDict) helper function
update msg model =
( { model
Expand All @@ -257,7 +258,7 @@ use the [`valuesDict`](#valuesDict) helper function
|> Json.Decode.decodeValue (NativeForm.decoder "edituserform123")
+ |> Result.map NativeForm.valuesDict
|> Result.withDefault []
}
}
, Cmd.none
)
Expand Down

0 comments on commit aeba4af

Please sign in to comment.