create Form with Drag and Drop, get form design/attributes in json

we can get design and can save design to database and render design from database

In general I think you can achieve this goal by serializing / deserializing the following 3 props of t.form.Form:

type
options
value

import React from 'react'
import t from 'tcomb-form'
import transform from 'tcomb-json-schema'

// a json representing a form
const json = {
  "schema": { // a json schema definition
    "type": "object",
    "properties": {
      "name": {
        "type": "string"
      },
      "surname": {
        "type": "string"
      }
    },
    "required": ["name", "surname"]
  },
  options: {
    "fields": {
      "name": {
        "error": "Bad name"
      },
      "surname": {
        "error": "Bad surname"
      }
    }
  },
  "value": {
    "name": "Giulio",
    "surname": "Canti"
  }
}

const Type = transform(json.schema)
const options = json.options
const value = json.value

const App = React.createClass({

  onSubmit(evt) {
    evt.preventDefault()
    const v = this.refs.form.getValue()
    if (v) {
      console.log(v)
    }
  },

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <t.form.Form
          ref="form"
          type={Type}
          options={options}
          value={value}
        />
        <div className="form-group">
          <button type="submit" className="btn btn-primary">Save</button>
        </div>
      </form>
    )
  }

})

gcanti / tcomb-form

create Form with Drag and Drop, get form design/attributes in json #276