• This repository has been archived on 01/May/2018
  • Stars
    star
    104
  • Rank 330,604 (Top 7 %)
  • Language
    JavaScript
  • Created about 10 years ago
  • Updated over 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

JSON powered forms for react

React Formly

build

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

More Repositories

1

angular-formly

JavaScript powered forms for AngularJS
JavaScript
2,240
star
2

vue-formly

JavaScript powered forms for Vue.js
JavaScript
235
star
3

angular-formly-templates-bootstrap

Angular-Formly: Bootstrap Templates
JavaScript
111
star
4

angular-formly-templates-ionic

Angular-Formly: Ionic Framework Templates
HTML
86
star
5

angular-formly-templates-material

Angular-Formly: Material Templates
JavaScript
55
star
6

vue-formly-bootstrap

JavaScript
51
star
7

formly-builder

A builder application for formly-js for drag-and-drop form creation which outputs the necessary JSON for the form.
JavaScript
36
star
8

angular-formly-templates-lumx

LumX Templates for Angular-Formly
CSS
36
star
9

angular-formly-website

The website for angular-formly
JavaScript
18
star
10

ng-formly-nativescript

JavaScript powered FORMS for NATIVESCRIPT for Angular 2 and up
TypeScript
10
star
11

angular-formly-templates-foundation

Angular-Formly: Zurb Foundation Templates
JavaScript
8
star
12

angular-formly-json-schema

A plugin for angular-formly to allow you to pass a json-schema to formly instead of formly's custom config.
7
star
13

angular-formly-templates-vanilla

Angular-Formly: Vanilla Templates
JavaScript
6
star
14

ng-formly-template-material

ng2-formly Material2 template
TypeScript
6
star
15

ng2.angular-formly.com

Website for Angular Formly 2
HTML
2
star
16

angular-formly-example

An example application that uses angular-formly, mostly as a demonstration as well as a place to learn how to use protractor :-)
JavaScript
2
star
17

angular-formly-siren-action

angular-formly plugin for siren action
API Blueprint
2
star
18

angular-formly-dynamic-interpolate-symbols

Plugin for angular-formly which will convert templates that use {{ and }} into the start and end from $interpolate
JavaScript
2
star
19

angular-formly-simplified

An abstraction on top of angular-formly with a simplified API
1
star
20

ng2-formly-templates-bootstrap

Angular-Formly: Bootstrap Templates
1
star
21

ng-formly-ionic-templates

1
star