Form Generator Library
npm install --save auto-form-gen
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)
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"
}
}
]
}
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,
}
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>
}
/>
)
}
}
MIT © Creskendoll