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

As of 0.3.8, components allow for onChange event handlers in props. They are fired when the value of the
component changes, regardless of the underlying handler (eg, FomrsyToggle uses onToggle internally, but we
still use onChange in props to hook into the event.)
The call back signatures for all onChange handlers conform to
Material-UI's proposed Standardized Callback Signatures.
An example usage of this would be to use an onChange for the FormsySelect and receive notifications when it changes.

$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"
},

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?">





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}
/>

);
}
});
`

Material-ui provides a .focus() method for some its components, such as TextField. formsy-material-ui components wrap Material-UI components, and if the underlying Material-UI component has a .focus() method, then the formsy-material-ui components will also expose a .focus() method, which just delegates to the underlying Material-UI component's .focus().

In the example below, we implement part of a chat-messaging application. The component is a form that provides a text input and a submit button; users can enter their message in the input and send it with the submit button. As a UX feature, we clear the form (resetForm()) and put the user's cursor back in the text field (this.messageInput.focus()) so that the user can easily begin to type his or her next message. We set a React ref on the FormsyText component (setting it to this.messageInput) in order to have access to it and use .focus().


`jsx
import React, { Component, PropTypes } from 'react'
import { Form } from 'formsy-react'
import RaisedButton from 'material-ui/lib/raised-button'
import FormsyText from 'formsy-material-ui/lib/FormsyText'

export default class ChatMessageForm extends Component {
constructor (props) {
super(props)
this.submit = this.submit.bind(this)
this.refMessageInput = c => this.messageInput = c
}

submit (model, resetForm) {
this.props.submitMessage(model.message)
resetForm()
this.messageInput.focus()
}

render () {
return (


ChatMessageForm.propTypes = {
submitMessage: PropTypes.func.isRequired
}
``

Known Issues

See issues.

Release History

See CHANGELOG.md

Acknowledgements

Originally based on an example by Ryan Blakeley.

Thanks to our contributors.