React Formly
JSON powered forms for react.
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