React Formly

JSON powered forms for react.

Demo

Example Usage

// add custom field types
FormlyConfig.fields.addType([
  { name: 'text', field: require('./components/field-types/TextField') },
  { name: 'number', field: require('./components/field-types/NumberField') },
  { name: 'checkbox', field: require('./components/field-types/Checkbox') }
]);

var App = React.createClass({
  getInitialState: function() {
    return { model: {} };
  },
  onFormlyUpdate: function(model) {
    this.setState({model: model});
  },
  componentWillMount: function() {
    this.formlyConfig = {
      name: 'myFormly',
      fields: [
        {
          key: 'name',
          type: 'text',
          label: 'Name',
          placeholder: 'If you would be so kind...',
          hidden: function(model) {
            return !!model.secretName;
          }
        },
        {
          key: 'age',
          type: 'number',
          label: 'Age'
        },
        {
          key: 'secretName',
          type: 'text',
          label: 'Secret name...?',
          placeholder: 'If you have no name...',
          hidden: function(model) {
            return !!model.name;
          }
        },
        {
          key: 'awesome',
          type: 'checkbox',
          label: 'Are you awesome?'
        }
      ]
    };
  },
  render: function() {
    return (
      <div className="container">
        <h2>Form</h2>
        <Formly config={this.formlyConfig} model={this.state.model} onFormlyUpdate={this.onFormlyUpdate} />

        <h2>Model:</h2>
        <pre>{JSON.stringify(this.state.model, null, 2)}</pre>
      </div>
    );
  }
});

React.renderComponent(<App />, document.body);

Formly

API

onFormlyUpdate

Called with the model anytime there's an update.

model

The model to represent with the form.

config

An object to configure formly. It is expected to have a name (string, optional) and fields (array of field). fields are expected to have a key, type / component, hidden (bool/func), data, (object), and props (object/func)

FormlyConfig

addType

FormlyConfig.addType('name', require('./FieldType'));
FormlyConfig.addType({
  name: 'name',
  field: require('./FieldType')
});
FormlyConfig.addType([
  {
    name: 'name',
    field: require('./FieldType')
  },
  {
    name: 'secondName',
    field: require('./FieldType2')
  }
]);

getTypes

var FieldType = require('./FieldType');
FormlyConfig.addType('field1', FieldType);
FormlyConfig.getTypes().field1 === FieldType; // <-- true

clearTypes

var FieldType = require('./FieldType');
FormlyConfig.addType('field1', FieldType);
var oldTypes = FormlyConfig.clearTypes();
oldTypes.field1 === FieldType; // <-- true
FormlyConfig.getTypes().field1 === undefined; // <-- true
FormlyConfig.getTypes(); // <-- {}

FieldMixin

Gives you 2 methods onChange and updateValue. onChange invokes updateValue with the current value. Handles special cases for checkbox, radio, and select. Defaults to node.value (input default). If your component has a transformUpdate, then it will be called with the value and the value will be reset to whatever is returned before it calls up to its parent (presumably the Formly component) with the new value.

Contributing

Yes, please...

Just run npm install then run gulp to see a list of available tasks.

Credits

Based on the simple api from angular-formly

License

MIT