JSON powered forms for react.
// 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);Called with the model anytime there's an update.
The model to represent with the form.
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('name', require('./FieldType'));
FormlyConfig.addType({
name: 'name',
field: require('./FieldType')
});
FormlyConfig.addType([
{
name: 'name',
field: require('./FieldType')
},
{
name: 'secondName',
field: require('./FieldType2')
}
]);var FieldType = require('./FieldType');
FormlyConfig.addType('field1', FieldType);
FormlyConfig.getTypes().field1 === FieldType; // <-- truevar FieldType = require('./FieldType');
FormlyConfig.addType('field1', FieldType);
var oldTypes = FormlyConfig.clearTypes();
oldTypes.field1 === FieldType; // <-- true
FormlyConfig.getTypes().field1 === undefined; // <-- true
FormlyConfig.getTypes(); // <-- {}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.
Yes, please...
Just run npm install then run gulp to see a list of available tasks.
Based on the simple api from angular-formly
MIT