https://github.com/victorvoid/formap
A reagent library to build awesome dynamic forms. 🔨
https://github.com/victorvoid/formap
Last synced: about 1 year ago
JSON representation
A reagent library to build awesome dynamic forms. 🔨
- Host: GitHub
- URL: https://github.com/victorvoid/formap
- Owner: victorvoid
- License: mit
- Created: 2019-07-08T01:03:56.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-07-08T21:29:03.000Z (almost 7 years ago)
- Last Synced: 2025-04-05T02:22:02.609Z (over 1 year ago)
- Language: Clojure
- Size: 23.4 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# formap
[](./LICENSE)
A reagent library to build awesome dynamic forms. 🔨
[](https://clojars.org/formap)
## Installation
To use formap in an existing project you add this to your dependencies in project.clj
```
[formap "0.x.x"]
```
## Why ?
The main objective is to build a form by a literal map that describe all fields.
- ♥️ Building form using literal map.
- 🔫 Validators support.
- 📄 Meta class in fields (touched|untouched|valid|invalid|etc).
## Documentation
First you need to create a literal map that describe a form and use it for build.
```cljs
(ns app.pages.signin
(:require
[reagent.core :as r]
[app.utils.validators :refer [username-or-email? password?]]
[formap.core :refer [build-form]]))
(def signin-fields
{:fields [{:name "login"
:placeholder "Username or Email"
:class "input"
:autoFocus true
:required "Username or Email is required"
:validators [username-or-email?]}
{:name "password"
:placeholder "Password"
:type "password"
:required "Password is required"
:validators [password?]}]})
(defn login []
[build-form {:experience signin-fields
:class "myform"
:on-submit #(js/console.log %)} ;;{:login "Text typed" :password "Password typed"}
[:button "Sign in"]])
```
### Validators
You can create your own validator and set a message error.
```cljs
(ns app.pages.signin
(:require
[reagent.core :as r]
[formap.core :refer [build-form]]))
(defn- match-regex?
"Check if the string matches the regex"
[v regex]
(boolean (re-matches regex v)))
(defn username-validate
[input]
(if (or (nil? input) (empty? input))
true
(match-regex? input #"^([a-zA-Z0-9.]+@){0,1}([a-zA-Z0-9.])+$")))
(def username?
{:validate username-validate
:message "Username invalid."})
(def signin-fields
{:fields [{:name "login"
:placeholder "Username"
:class "input"
:autoFocus true
:required "Username is required"
:validators [username?]}
{:name "password"
:placeholder "Password"
:type "password"
:required "Password is required"}]})
(defn login []
[build-form {:experience signin-fields
:class "myform"
:on-submit #(js/console.log %)}
[:button "Sign in"]])
```
License
-------
The code is available under the [MIT License](LICENSE.md).