A reagent library to build awesome dynamic forms. 🔨
To use formap in an existing project you add this to your dependencies in project.clj
[formap "0.x.x"]
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).
First you need to create a literal map that describe a form and use it for build.
(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"]])
You can create your own validator and set a message error.
(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"]])The code is available under the MIT License.