This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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;