auto-form-gen v1.0.15
auto-form-gen
Form Generator Library
Install
npm install --save auto-form-gen
Getting Started
Form Data
FormTemplate
and Form
should be provided with a JSON object in their data
property.
Each entry in the JSON should at least have attributes relating to the following control interface,
interface IControlData {
key : string,
label : string,
type : string,
required : boolean
}
The key
and label
can be any string the type
should be one of:
- "textbox"
- "dropdown"
- "date"
- "radio"
- "checkbox"
- "multiline"
- "file" (Work in progress)
Template
Example for a JSON file is shown below, form fields are elaborated down below.
data.json
{
"form-name": "Example Form",
"controls": [
{
"key": "textbox0",
"label": "Textbox Example",
"type": "textbox",
"required": true,
"minLength": 0,
"maxLength": 10,
"regex": "[^@]+@[^\\.]+\\..+"
},
{
"key": "dropdown0",
"label": "Drop Down Example",
"type": "dropdown",
"multiple": false,
"required": true,
"options": {
"textPath": "..text",
"valuesPath": "..value",
"data": [
{
"text": "Option 1",
"value": "value_1"
},
{
"text": "Option 2",
"value": "value_2"
}
]
}
},
{
"key": "radio0",
"label": "Radio Example",
"type": "radio",
"required": false,
"options": {
"url": "https://api.myjson.com/bins/662ps",
"method": "get",
"requestData": "",
"textPath": "..text",
"valuesPath": "..value"
}
}
]
}
Options
If an URL is provided in the options then the data
for the options in dropdown or radio controls will be read through that address.
FormTemplate
component has required props of json data, BaseConnector
instance and a layout as JSX.
FormControl
and FormLabel
have a prop named optionsKey of type string.
textPath
and valuesPath
define where in the data
object the relevant information is stored. For more information refer to JSONPath.
The full list of control options:
interface IOptionsData {
url : string,
method : string,
requestData : string,
textPath : string,
valuesPath : string,
data : object
}
interface ITextBox {
minLength : number,
maxLength : number,
regex : string
}
interface IMultiLine {
minLength : number,
maxLength : number
}
interface IDate { }
interface ICheckBox { }
interface IRadio {
options : IOptionsData
}
interface IDropDown {
multiple : boolean,
options : IOptionsData
}
interface IFile {
multiple : boolean,
}
Example Usage
App.tsx
import * as React from 'react'
import * as myData from './data.json';
import { FormTemplate, ConnectorOptions, BaseConnector, FormControl, FormLabel } from 'auto-form-gen';
let connectorOptions = new ConnectorOptions('http://localhost:5000', 'post', {
extra_data: 'extra'
});
let myConnector = new BaseConnector(
connectorOptions,
() => {
alert('success');
},
() => {
alert('fail');
}
);
class App extends React.Component {
render () {
return (
<FormTemplate data={myData} connector={myConnector}
layout={
<table>
<thead>
<tr>
<th>Label</th>
<th>Control</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<FormLabel optionsKey="textbox0" />
</td>
<td>
<FormControl optionsKey="textbox0" />
</td>
</tr>
<tr>
<td>
<FormLabel optionsKey="dropdown0" />
</td>
<td>
<FormControl optionsKey="dropdown0" />
</td>
</tr>
<tr>
<td>
<FormLabel optionsKey="radio0" />
</td>
<td>
<FormControl optionsKey="radio0" />
</td>
</tr>
</tbody>
</table>
}
/>
)
}
}
License
MIT © Creskendoll