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