react-form-generator

react-form-generator is a pure (state-less) React component, that generates complex forms from declarative metadata.

Contents

1. Basic 1.1. Simple form - a minimal working API 1.2. Simple validation 1.3. Default values and initial form validation 1.4. Simple events routing
2. Intermediate 2.1. Standard layouts 2.2. Complex validation 2.3. Event routing 2.4 On-blur validation 2.5 Dynamic forms 2.6 Dynamic validators 3 Advanced 3.1 Adding custom validator 3.2 Adding custom primitive 3.3 Adding custom layout

Basic

Simple form - a minimal working API.

Let's start from building the simple form:

To see our form, go to the tab "Result". In the tab "HTML", you can see some basic metadata, that Generator uses to render form.

window.meta = {
    "fields": {
        "field1": {
            "renderer": "text",
            "defaultValue": "test read-only value",
            "isReadOnly": true
        },
        "field2": {
            "renderer": "text"
        }
    },

    "layout": {
        "grid": {
            "css": "container demo-form",
            "rows": [{
                "css": "row",
                "cells": [{
                    "css": "col-xs-12 col-sm-12 col-md-10",
                    "content": [{
                        "renderer": "default",
                        "rendererSpecific": {
                            "fieldID": "field1",
                            "label": "Field #1:",
                            "css": {
                                "wrapper": "row",
                                "inner": "",
                                "label": "col-xs-2 col-sm-2 col-md-2",
                                "field": "col-xs-10 col-sm-10 col-md-10"
                            }
                        }
                    }]
                }]
            },
            ...]
        }
    }
}

At the top level, our metadata consists of two sections: fields and layout. The fields sections describes logical model of generated form, and layout section describes ... well, layout.

Logical model includes some essential information about each of fields: type (text, checkbox, etc.), visibility, readonly-ness, validation rules and other.

Layout describes form's presentation: how to draw each of fields in the page, where to drive field's label, field's errors of validation and so on.

Layout system is grid-based. If you are familiar with bootstrap's grid system, then you know, what I mean.

Simple validation

in progress

Default values and initial form validation

in progress

Simple events routing

in progress

Intermediate

in progress