formsy-material-ui 

formsy-react is a form validation component for React forms.
This is a wrapper for Material-UI form components to allow them to be used with formsy-react.

Installation

$ npm install formsy-material-ui

Note: For React 0.13.x compatibility, specify formsy-react 0.14.1 in your app.

NB: Material-UI 0.14.1 introduced a regression that made it incompatible with CommonJS require(). Please use Material-UI 0.14.2 or above.

Usage

Note: for FormsyText you must use value instead of defaultValue to set a default value.

As of 0.3.0 the library is split into separate modules, so you can import only those needed for a particular form.
This will save overhead particularly if you are not using the Date and / or Time components.

``js
var FormsyCheckbox = require('formsy-material-ui/lib/FormsyCheckbox');
var FormsyDate = require('formsy-material-ui/lib/FormsyDate');
var FormsyRadio = require('formsy-material-ui/lib/FormsyRadio');
var FormsyRadioGroup = require('formsy-material-ui/lib/FormsyRadioGroup');
var FormsySelect = require('formsy-material-ui/lib/FormsySelect');
var FormsyText = require('formsy-material-ui/lib/FormsyText');
var FormsyTime = require('formsy-material-ui/lib/FormsyTime');
var FormsyToggle = require('formsy-material-ui/lib/FormsyToggle');
`

If you prefer you can import the whole library, and associated MUI components, by requiring formsy-material-ui
this will have the same footprint, regardless of which components you chose to assign in the following line(s):

$3

`js
const FMUI = require('formsy-material-ui');
const { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup, FormsySelect, FormsyText, FormsyTime, FormsyToggle } = FMUI;
`

$3

`js
var FMUI = require('formsy-material-ui');
var FormsyCheckbox = FMUI.FormsyCheckbox;
var FormsyDate = FMUI.FormsyDate;
var FormsyRadio = FMUI.FormsyRadio;
var FormsyRadioGroup = FMUI.FormsyRadioGroup;
var FormsySelect = FMUI.FormsySelect;
var FormsyText = FMUI.FormsyText;
var FormsyTime = FMUI.FormsyTime;
var FormsyToggle = FMUI.FormsyToggle;
`

$3

#### Example App
Live demo, code: formsy-material-ui

#### Example Code
`jsx
const FMUI = require('formsy-material-ui');
const { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup, FormsySelect, FormsyText, FormsyTime, FormsyToggle } = FMUI;
const RaisedButton = require('material-ui/lib/raised-button');

const Form = React.createClass({

getInitialState: function () {
return {
canSubmit: false
};
},

errorMessages: {
wordsError: "Please only use letters"
},

selectFieldItems: [
{ payload: 'never', text: 'Never' },
{ payload: 'nightly', text: 'Every Night' },
{ payload: 'weeknights', text: 'Weeknights' }
],

enableButton: function () {
this.setState({
canSubmit: true
});
},

disableButton: function () {
this.setState({
canSubmit: false
});
},

submitForm: function (model) {
// Submit your validated form
console.log("Model: ", model);
},

render: function () {
let { wordsError } = this.errorMessages;

return (
onValid={this.enableButton}
onInvalid={this.disableButton}
onValidSubmit={this.submitForm} >

name='name'
validations='isWords'
validationError={wordsError}
required
hintText="What is your name?"
value="Bob"
floatingLabelText="Name" />

name='frequency'
required
floatingLabelText="How often do you?"
menuItems={this.selectFieldItems}/>

name='date'
required
floatingLabelText="Date" />

name='time'
required
floatingLabelText="Time" />

name='agree'
label="Do you agree to disagree?"
defaultChecked={true} />

name='toggle'
label="Toggle" />


value="light"
label="prepare for light speed" />
value="not_light"
label="light speed too slow" />
value="ludicrous"
label="go to ludicrous speed"
disabled={true} />


type="submit"
label="Submit"
disabled={!this.state.canSubmit} />

);
}
});
``

Known Issues

See issues.

Release History

See CHANGELOG.md

Acknowledgements

Originally based on an example by Ryan Blakeley.

Thanks to our contributors.