<h1 align="center">Welcome to Form Builder π</h1>
npm install imcformbuilder
|
|
sh
npm install formbuilder
`
Usage basic
While you develop, showedit={true} will show you edit button.
Upon complete development, change showedit to false to hide button.
`js
showedit={true}
formArray={formArray}
onFinish={onFinish}
onValuesChange={onValuesChange}
/>
`
EventHandler
1. onFinish: By clicking submit button, onFinish function returns a value as object.
With this you can proceed other action, such as save to server or change state.
Return data is key value object for example: {collection:"abc",querystring:"123",.....}
2. onValuesChange: returns two parameters, changedValues, allValues.
First value return just changed key value object, last value returns all key value object.
e.g.
a. changedValues: {collection:"abc"},
b. allValues:{collection:"abc",querystring:undefined.....}
`js
const onFinish = (val) => {
console.log(val);
};
const onValuesChange = (changedValues, allValues) => {
console.log(changedValues, allValues);
};
`
Sample data(formArray)
formArray is composed of two parts:
1. list: items in the form
2. setting: look and feel of the form
`sh
{
"list": [
{
"label": "Collection",
"name": "collection",
"type": "input",
"seq": 0,
"placeholder": "database table",
"rules": [
{
"required": false
}
],
"requiredmsg": "you must insert"
},
{
"label": "QueryString",
"name": "querystring",
"type": "input",
"seq": 1,
"placeholder": "pid=xxxx or _id=yyyy",
"msgright": "λΌμ΄νΈ λ©μμ§"
},
{
"label": "Submit",
"name": "",
"type": "button",
"seq": 7,
"action": "submit",
"btnStyle": "primary",
"btnColor": "primary",
"align": "right"
}
],
"setting": {
"editable": false,
"name": "antform",
"layout": "horizontal",
"formColumn": 1,
"formItemLayout": {
"labelCol": {
"span": 4
},
"wrapperCol": {
"span": 20
}
},
"tailLayout": {},
"initial": {},
"size": "middle",
"onFinish": "{values => {console.log(values);};}",
"initialValues": {}
},
}
``