formsy-material-ui-alpha

    0.3.5 • Public • Published

    formsy-material-ui npm version

    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.

    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):

    ES6:

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

    ES5:

    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;

    Examples

    Example App

    Live demo, code: formsy-material-ui

    Example Code

    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 (
          <Formsy.Form
            onValid={this.enableButton}
            onInvalid={this.disableButton}
            onValidSubmit={this.submitForm} >
     
             <FormsyText
              name='name'
              validations='isWords'
              validationError={wordsError}
              required
              hintText="What is your name?"
              value="Bob"
              floatingLabelText="Name" />
     
            <FormsySelect
              name='frequency'
              required
              floatingLabelText="How often do you?"
              menuItems={this.selectFieldItems}/>
     
            <FormsyDate
              name='date'
              required
              floatingLabelText="Date" />
     
            <FormsyTime
              name='time'
              required
              floatingLabelText="Time" />
     
            <FormsyCheckbox
              name='agree'
              label="Do you agree to disagree?"
              defaultChecked={true} />
     
            <FormsyToggle
              name='toggle'
              label="Toggle" />
     
            <FormsyRadioGroup name="shipSpeed" defaultSelected="not_light">
              <FormsyRadio
                value="light"
                label="prepare for light speed" />
              <FormsyRadio
                value="not_light"
                label="light speed too slow" />
              <FormsyRadio
                value="ludicrous"
                label="go to ludicrous speed"
                disabled={true} />
            </FormsyRadioGroup>
     
            <RaisedButton
              type="submit"
              label="Submit"
              disabled={!this.state.canSubmit} />
          </Formsy.Form>
        );
      }
    });

    Known Issues

    See issues.

    Release History

    See CHANGELOG.md

    Acknowledgements

    Originally based on an example by Ryan Blakeley.

    Thanks to our contributors.

    Install

    npm i formsy-material-ui-alpha

    DownloadsWeekly Downloads

    0

    Version

    0.3.5

    License

    MIT

    Last publish

    Collaborators

    • rblakeley