wtnm / fform

Flexibile and extendable form builder with constructor

Table of content

• Overview
  • Features
• Installation & Usage
  • Without JSON validaton
  • With JSON validaton
• Tutorial
• Examples
• Documentation

Overview

Flexible Form (fform) - form builder with minimum redundancy, maximum flexibility, and extendability. It uses JSONSchema to describe forms, React (v16) for rendering and has native Redux support for state storage but can be used with any other external storage or can use only internal storage (storage agnostic).

See fform-constructor for live demo.

Features

• 98kb minified, 28kb gziped
• form-constuctor for quick start
• form extension, combination and reuse with JSONSchema's allOf, oneOf, $ref properties
• sync/async/JSON/submit validation
• storage agnostic, native redux support, can be used with any external storage or can use own internal storage
• built-in arrays (add/del/move operations)
• built-in viewer
• fully customizable
• SSR support

Installation & Usage

To install the stable version:

npm install --save fform

This assumes that you are using npm with a module bundler like webpack

Without JSON validaton

import {FForm, elements} from 'fform';
import {render} from 'react-dom';

render(<FForm core={{name:"name", schema: {type:"string"}, elements}}/>, document.querySelector('#root'));

With JSON validaton

import {FForm, elements} from 'fform';
import {render} from 'react-dom';

import imjvWrapper from 'fform/addons/imjvWrapper';
import * as imjvValidator from 'fform/addons/is-my-json-valid-lite';
const JSONValidator = imjvWrapper(imjvValidator);

render(<FForm core={{name:"name", schema: {type:"string"}, elements, JSONValidator}}/>,
		document.querySelector('#root'));

How to use with different storages see in documentation

Tutorial

Examples

• simple form
• layouts and viewer
• arrays and oneOf
• stateMaps
• validation
• format and parse
• schema exten
• custom input
• tabs and steps

Documentation

• FForm
  • FForm methods and properties
• fformCores
  • Storages
    • Redux storage
    • External storage
    • Internal storage
  • Path
  • Data object
• API
  • get(...paths: string | string[])
  • set(path: string | string[], value: any, opts?: setOpts )
  • getValue(opts?: getValueOpts)
  • setValue(value: any, opts?: setValueOpts)
  • getDefaultValue()
  • reset(opts?: resetOpts)
  • clear(opts?: clearOpts)
  • validate(path: boolean | string | string[], opts?: APIOptsType)
  • arrayAdd(path: string | string[], value: number | any[], opts?: APIOptsType)
  • arrayItemOps(path: string | string[], op: string, opts: arrayItemOpts)
  • setHidden(path: string | string[], value?: boolean, opts?: APIOptsType)
  • showOnly(path: string | string[], opts?: APIOptsType)
  • getActive()
  • execute()
• Basic schema properties
  • Metadata
  • Number Validation
  • String Validation
  • Array Validation
  • Object Validation
  • Combining Schemas
• Extended schema properties
  • _placeholder?: string
  • _params?: FFParamsType
  • _data?: any
  • _presets?: string
  • _simple?: boolean
  • _enumExten?: { [key: string]: undefined | string | object }
  • _stateMaps?: Array
  • _validators?: Array
  • _oneOfSelector: string | dataHandler
  • _custom?: FFCustomizeType
  • _layout?: FFLayoutCustomizeType
  • _strictLayout?: boolean
• Validation
  • JSON validation
  • Sync/async validation
• Field structure and customization
• Form layout
• Elements
  • Props processing
  • Data handlers
  • $_maps
  • Structure
• Styling
• SSR