formsy-material-ui

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

Installation

To and install formsy-material-ui and add it to your package.json, run:

$ npm install --save formsy-material-ui

You will also need to add formsy-react if not already installed:

$ npm install --save formsy-react

Note: For React 15.0.x compatibility, specify "formsy-react": "^0.18.0".

Usage

ES6 Imports

import FormsyCheckbox from 'formsy-material-ui/lib/FormsyCheckbox';
import FormsyDate from 'formsy-material-ui/lib/FormsyDate';
import FormsyRadio from 'formsy-material-ui/lib/FormsyRadio';
import FormsyRadioGroup from 'formsy-material-ui/lib/FormsyRadioGroup';
import FormsySelect from 'formsy-material-ui/lib/FormsySelect';
import FormsyText from 'formsy-material-ui/lib/FormsyText';
import FormsyTime from 'formsy-material-ui/lib/FormsyTime';
import FormsyToggle from 'formsy-material-ui/lib/FormsyToggle';
import FormsyAutoComplete from 'formsy-material-ui/lib/FormsyAutoComplete';

OR:

import { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup, 
  FormsySelect, FormsyText, FormsyTime, FormsyToggle, FormsyAutoComplete } from 'formsy-material-ui/lib';

Events

Components allow for onChange event handlers in props. They are fired when the value of the component changes, regardless of the underlying handler (eg, FormsyToggle 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.

Examples

Example App

The formsy-material-ui repo contains a sample webpack SPA.

Example Code

You can find an example form in the example app directory.

Known Issues

See issues.

Release History

See CHANGELOG.md

Acknowledgements

Originally started by Matt Brookes and later transfered.

Thanks to our contributors.

Alternatives

Here are some alternative solutions you might also wish to consider:

• react-material-ui-form-validator
• Redux Form Material-UI example

Changelog

• 0.6.3 Bump deps in example <Ryan Blakeley>

    Fix older default props method <Ryan Blakeley>

• 0.6.2 Fix to exclude onChange from getting passed on ...rest <Ryan Blakeley>

• 0.6.1 Update lint config <Ryan Blakeley>

    Fixed controlled Date and TimePicker <Ferenc Faluvegi>
    Fix validation color <dex157>
    add new optional convertValue property to FormsyText <Ulich, Timo>
    use create-react-app and prop-types <Timo Ulich>
    Fix test assertion <Jan Amann>
    Reduce calls to `onChange` of the parent form. <Jan Amann>
    Remove unused prop <Matt McDonald>
    Fix Unknown prop `requiredError` <Matt Brookes>

• 0.6.0 Support material-ui ^0.17.0 & formsy-react ^0.19.0

• 0.5.5 revert FormsyText internal value setting method

• 0.5.4 use FormsyText internal _value to allow external setValue calls

    support requiredError on FormsyDate
    add underlineStyle and underlineFocus props to FormsyText
    fix FormsyAutoComplete to update value when MenuItem selected
    make compatible with react v15.4.x
    implement isFormDisabled() check
    fix tests

• 0.5.3 Fix radio button group reset

    Fix updateImmediately breaking validations
    Bump material-ui to v0.16
    Bump react-tap-event-plugin
    Add new component FormsyAutoComplete

• 0.5.2 Fix 0.5.1 error (Issue #150, PR #151) (@codeaholicguy)

• 0.5.1 Add updateImmediately prop & fix handleChange (@mbrookes)

• 0.5.0 Lint jsx files - fix linting errors in same

    Accepts Formsy.Form.reset() (@Mokto)
    Fix text input values, and form reset (@reebalazs)
    Fixes React 15.2 unknown props warnings (@jayalfredprufrock)

• 0.4.2 Fix controlled / uncontrolled conflicts

    Add defaultValue support to FormsyText 
    (no longer have to use `value` to set the default)
    Add eslint and fix linting errors
    Add .editorconfig

• 0.4.1 Fix issue with FormsyText default value.

• 0.4.0 Update to MUI 0.15.0-beta.1, React 15.0.1, formsy-react 0.18.0

    Add a webpack example

• 0.3.9 Use defaultDate rather than defaultValue in FormsyDate (@ZoetropeLabs)

    Change text component proptype to allow any data type for value (@scrambled2k3)
    Remove dependency on onEnterKeyDown (@enricofoschi)
    Add `lib` to `.gitignore`
    FormsyCheckbox - Fix error on form reset (@jurgob)

• 0.3.8 Propagate events as onChange() (@magicalcows) babel 6 (@mbrookes)

• 0.3.7 Expose a .focus() method (@py-in-the-sky)

• 0.3.6 Add custom onBlur and onFocus handler support (@Aweary)

• 0.3.5 Support composable SelctField (@rblakeley), update REDME SelectField example, remove mixin

• 0.3.4 Fix for #35 - Treat MUI Checkbox as a controlled component to address MUI 0.14.0-rc2 regression

• 0.3.3 Fix default (ISO8601 style) date for formatDate to respect client timezone

• 0.3.2 Remove explicit files declaration from package.json (the npm docs lie!)

• 0.3.1 Add ./lib/ to package.json.

• 0.3.0 Split into separate files to allow individual import of MUI components

• 0.2.5 Fix issue #21 Textfield defaultValue handling.

• 0.2.4 Updated textfield handling (@vijayrawatsan), selectfield fix (@dmlinn).

• 0.2.3 Fix textfield initialization through this.refs.form.reset(model) (@vijayrawatsan).

• 0.2.2 Add prepublish script and associated dev dependency to package.json.

• 0.2.1 Convert dependencies to peerDependencies.

• 0.2.0 Only validate textfield onBlur

• 0.1.6 Correct live-demo URL

• 0.1.5 Add react-components keyword to package.json

• 0.1.4 Add formsy-react dependency (previously assumed it was already installed).

• 0.1.3 Fix Checkbox & Toggle to return value when unchanged, don't import all of MUI (!), update example in README.

• 0.1.2 Babelify same!

• 0.1.1 Fix exports.

• 0.1.0 Initial release.