Fable.Form allows you to build forms that are:
- Composable: they can be extended and embedded in other forms
- Type safe: makes the most of F# compiler to tie everything together
- Scalable: you don't need a
Msgfor each field neither repeat yourviewcode - Terse: your field logic is defined in a single place
- Modular: you can create your own fields and customize how existing fields are rendered
Example
let form : Form.Form<Values, Msg, _> =
let emailField =
Form.textField
{
Parser =
fun value ->
if value.Contains("@") then
Ok value
else
Error "The e-mail address must contain a '@' symbol"
Value =
fun values -> values.Email
Update =
fun newValue values ->
{ values with Email = newValue }
Error =
fun _ -> None
Attributes =
{
Label = "Email"
Placeholder = "[email protected]"
}
}
let passwordField =
Form.passwordField
{
Parser = Ok
Value =
fun values -> values.Password
Update =
fun newValue values ->
{ values with Password = newValue }
Error =
fun _ -> None
Attributes =
{
Label = "Password"
Placeholder = "Your password"
}
}
let onSubmit =
fun email password ->
LogIn (email, password)
Form.succeed onSubmit
|> Form.append emailField
|> Form.append passwordFieldThis repository use NPM scripts to control the build system here is a list of the main scripts available:
| Script | Description |
|---|---|
npm run clean |
To use when want to clean all the artifacts |
npm run watch-examples |
To uses when working on the examples project |
npm run watch-tests |
To use when working on the tests suits |
npm run watch-docs |
To use when working on the documentation, hosted on http://localhost:8080 |
npm run publish-docs |
Build a new version of the documentation and publish it to Github Pages |
npm run release |
Build a new version of the packages if needed and release it |
Naming library is super annoying.
To make it easy to discover, in general, you need to choose a simple and clear name. Especially in a "small" ecosystem like Fable. The problem is that these names are rarely fun neither exciting.
But, it is possible to spice thing up for this reason Fable.Form stands for Fable.Formidable.
Special thanks to Urs Enzler who came up with this idea
In 2018, I created Thoth.Elmish.FormBuilder as an attempt to prevent having one Msg per field and repeat the same view code.
At that time, I was not able to find a way to do it in a fully type safe way and use "magic strings" and boxing/unboxing to work around the type system a bit.
The problem is that the system is pretty rigid and when you are in form logic you can't access the outside world or pass data in it. For example, it is hard to integrate external errors or pass the user session to send request on the server for auto completion, etc.
Fast forward three years later, I discovered the work done by Héctor Ramón in elm ecosystem with hecrj/composable-form. This library aligned perfectly with my original vision I had in 2018. I finally, decided to accept that Thoth.Elmish.FormBuilder should be archived and that I should write a new library which aligned with my original vision and goals.
Fable.Form can be seen has a port of hecrj/composable-form for Fable but adapted with my vision of how a form should work.
