formosa-material-ui-v3

Formosa

What?

The objective of this library is to make building dynamic forms with complex validations easier leveraging MobX

Example

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isValid: false };
  }
 
  handleSubmit(loginData) {
    /*
    Do whatever you want to do here.
 
    The object will follow the form's structure so
    loginData will be an object with 'username' and
    'password' properties, eg:
 
    {
      username: 'ludat',
      password: 'super secret'
    }
    */
  }
 
  render() {
    return (
      <Form
        onSubmit={this.handleSubmit}
        onValid={() => this.setState({isValid: true})}
        onInvalid={() => this.setState({isValid: false})}
      >
        <ValidatedInput
          name="username"
          validation={notEmpty.and(alphaOnly)}
        />
        <ValidatedInput
          name="password"
          validation={notEmpty}
        />
        <button type='submit' disabled={!this.state.isValid}/>
      </Form>
    );
  }
}

This simple example shows the most basic features of this library, among the most important it includes:

• Nested forms: There can be sections of a form that validate multiple fields. eg, a field can never be higher than the other number