A formsy-react compatibility wrapper for Material-UI form components.
npm install formsy-material-ui-alphaformsy-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.
$ 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.
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):
`js`
const FMUI = require('formsy-material-ui');
const { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup, FormsySelect, FormsyText, FormsyTime, FormsyToggle } = FMUI;
`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;
#### 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 (
onInvalid={this.disableButton}
onValidSubmit={this.submitForm} >
validations='isWords'
validationError={wordsError}
required
hintText="What is your name?"
value="Bob"
floatingLabelText="Name" />
required
floatingLabelText="How often do you?"
menuItems={this.selectFieldItems}/>
required
floatingLabelText="Date" />
required
floatingLabelText="Time" />
label="Do you agree to disagree?"
defaultChecked={true} />
label="Toggle" />
label="prepare for light speed" />
label="light speed too slow" />
label="go to ludicrous speed"
disabled={true} />
label="Submit"
disabled={!this.state.canSubmit} />
);
}
});
``
See issues.
See CHANGELOG.md
Originally based on an example by Ryan Blakeley.
Thanks to our contributors.