lodash-form-collector
installation
npm i -S lodash-form-collector
import
const lfc =
usage
const form = documentconst data = console
basic collecting
html
result
username: 'crapthings' password: 'secret'
collect nested field
Sets the value at path of object. If a portion of path doesn't exist, it's created. Arrays are created for missing index properties while objects are created for all other missing properties.
html
result
something: 'anything' profile: displayName: 'crapthings' address: city: 'harbin' age: 32 gender: 'male' array: 'string1' 'string2' sameName: 'text with same name' 'will be collect as array'
single checkbox with unique name
if there's a single checkbox that you want to use String as value, just write your input as normal. when it has checked, the value will present at the form result, when unchecked it won't present at result.
if there's a single checkbox that you want to use as Boolean, give your input an data attr data-type="boolean", checked = true, unchecked will collect as false.
html
result
useValue: 'check me' unchecked: false deep: checked: true
multiple form controls with same name
if there're multiple inputs like text that have same name. it will be collecting as array, when no values are given, it gives an empty array [].
if there're multiple checkboxes that you want to use String as value. just write your input as normal. when it has checked, the value will present at the form result. when all inputs unchecked it will be an empty array [].
html
result
emptyArray: emails: 'crapthings@gmail.com' 'crapthings@163.com' checkbox: 'a' 'b'
data type conversion
you can turn string to number or array by using data-type="number || array || [number]". text, textarea, search, hidden, select are supported.
[string separator]: text. search, hidden, options of select is ',' and textarea is '\n' by default, you can use optional by data-separator="separator".
html
result
"textString": "100" "textStringToNumber": 100 "textStringToArray": "100" "200" "300" "400" "500" "textStringItemOfArrayToNumber": 100 200 300 400 500 "textStringItemOfArrayToNumberBySpace": 100 200 300 400 500 "hiddenString": "100" "hiddenStringToNumber": 100 "hiddenStringToArray": "100" "200" "300" "400" "500" "hiddenStringItemOfArrayToNumber": 100 200 300 400 500
TODOS
- add feature data-type='object || [object]' ?
- file to base64