formsy-mui

Formsy MUI

A Formsy wrapper for Material-UI components

Installation

To get started with Formsy MUI, you can simply install it with npm:

npm i --save formsy-mui

or with yarn

yarn add formsy-mui

Formsy MUI is currently compatible with React 15.5x. For React 15.4.x and below it is recommended that you install formsy-material-ui and formsy-react instead.

Basic Usage

import React from 'react';
import Formsy from 'formsy-react-2';
import FormsyText from 'formsy-mui/FormsyText';
import RaisedButton from 'material-ui/RaisedButton';

class MyForm extends React.Component {
  state = {
    formIsValid: false
  }

  enableSubmit = () => {
    this.setState({formIsValid: true});
  }

  disableSubmit = () => {
    this.setState({formIsValid: false});
  }

  submit (model) {
    console.log(model);
    // model = {
    //   foo: '[e-mail]',
    //   bar: 10
    // }
  }

  // This code results in a form with Material UI text field and a submit button
  // that will run the `submit` method when the submit button is clicked with a
  // valid email. The submit button is disabled as long as the foo input is empty
  // and the value is not an email. On validation error it will show the error message.

  render () {
    return (
      <Formsy.Form
        onValidSubmit={this.submit}
        onValid={this.enableSubmit}
        onInvalid={this.disableSubmit}>

        <div>
          <FormsyText
            name='foo'
            validations='isEmail'
            validationError='This is not a valid email'
            required />
        </div>

        <div>
          <RaisedButton
            type='submit'
            label='Submit'
            disabled={!this.state.formIsValid} />
        </div>
      </Formsy.Form>
    );
  }
}

export default MyForm;