ffxsam/formous

Simple and elegant form-handling for React - ABANDONWARE

formous's Issues

setDefaultValues still renders without default

since setDefaultValues calls setState inside Formous, the form component that is wrapped by Formous can still rendered once without default values

ie in the form's componentWillMount

componentWillMount() {
this.props.setDefaultValues({
    someField: 'hello'
  });
},
render() {
  this.props.fields.someField.value; // this will still be an empty string: ""
 // ...
}

it would be nice if the field options allowed an initial value or do you have another idea how render could be prevented until i am able to set the default value?

Usage of HOC

Just wondering if usage of HOC is right here. Shouldnt this technique be used for extending component behaviour but without it knowing it?

Here we have used it to inject few things into it. Seems for me that regular component with children would be more appropriate here. What are your thoughts on the matter?

Cheers.

Would like to display submit button disabled if invalid

I guess this would require access to formStatus in the form onChange event.

Working with nested form fields and default form values in this.state

I'm building a multi step form and i'm having a bit of trouble understanding how to get this to work with nested form field sections. Example: Form Container

How to force to show field errors when first time hit submit

Currently if the field hasn't been touched, it seems it doesn't show the error. Can we have a setting where the errors are shown up whenever a user submits the form?

pass formStatus to wrapped component

would you be open to passing formStatus to the wrapped component? ie:

      return <Wrapped
        { ...this.props }
        fields={this.state.fields.toJS()}
        formStatus={this.state.form.toJS()}
        formSubmit={this.formSubmit}
        setDefaultValues={this.setDefaultValues}
      />

This would be useful in cases where you might want to disable something if the form is not valid.

Something is breaking server-side rendering

I haven't tracked down the cause. But I have a form that works fine in a client-only app, but causes server-side rendering to hang.

My form looks like this:

/* @flow */

import React from 'react';
import Formous from 'formous';


const ErrorText = ({errorText}) =>
  <div style={{ color: '#f00' }}>{errorText}</div>;


class LoginForm extends React.Component {
  render() {
    const {
      fields: { username, password },
      formSubmit,
      onSubmit,
    } = this.props;

    console.log('username, password');

    return (
      <div>
        <form onSubmit={formSubmit(onSubmit)}>
          <div>
            <input
              placeholder="username or email address"
              type="text"
              value={username.value}
              {...username.events}
            />
          </div>
          <div>
            <input
              placeholder="your password"
              type="password"
              value={password.value}
              {...password.events}
            />
          </div>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>
    );
  }
}


const formousOptions = {
  fields: {
    username: {
      name: 'username',
      tests: [
        {
          critical: true,
          failProps: { errorText: 'Your username or email address is required.' },
          test: value => value !== '',
        },
      ],
    },
    password: {
      name: 'password',
      tests: [
        {
          critical: true,
          failProps: { errorText: 'You must supply a password.' },
          test: value => value !== '',
        },
      ],
    },
  },
};

export default Formous(formousOptions)(LoginForm);

I'm rendering it in this component:

const GlobalHeader = () => {
  return (
    <div className={styles.root}>
      <div className={styles.logo}>
        <Logo />
      </div>
      <div className={styles.locale}>
        <LocaleSwitcher />
      </div>
      <div className={styles.login}>
        <LoginForm />
      </div>
    </div>
  );
};

Using failProps with react-bootstrap?

Wondering if it's possible to use this package with react-bootstrap for validation.
In react-bootstrap, there is a validationState property to set 'error', but it's on the element's parent component, FormGroup. FormGroup wraps both the label and the form control.

Bug: inputs don't get validated on enter/return key

Bug:

1. Make a normal form like:

<form onSubmit={formSubmit(this.handleSubmit)}>
    <input type="text" placeholder="username" value={username.value} {...username.events} />
    <input type="password" placeholder="password" value={password.value} {...password.events} />
    <button type="submit">Submit</button>
</form>

1. User clicks the username input.
2. Types the username
3. Presses Tab
4. password input gets focus
5. Types any valid password
6. Presses Enter.
7. Guess what they see? formStatus.valid is false even when the inputs are correct so handleSubmit alerts Please address the errors in the form
8. User clicks the button. Works fine because password input loses focus and gets validated.

Possible Fixes:

1. Give users a way to manually validate the form anytime they want to.
2. Validate the form before invoking the callback passed to formSubmit.

Probably would fix #7

Suggestion on package name

Hey! nice work on formous... I always get hipped with high order components :D

I'd like to suggest you to rename your package to react-formous, considering that all packages strictly created for react has this prefix... this would make it easier for react developers to find your package (at least it would for me).

Also, the name is available for registration :D https://www.npmjs.com/package/react-formous

This is just a suggestion though, formous is still a great name

👍

HTML demo page

Can you make and add a link to a HTML demo page like https://github.com/davezuko/react-reformed has?

Support checkboxes

Hi! I have a problem with setting up checkboxes inside formous. What's the best way to do it?

Now I have to do something like this:

<Checkbox
  checked={this.state.rememberMeValue}
  onBlur={(event) => {
    event.target.value = this.state.rememberMeValue;
    rememberMe.events.onBlur(event);
  }}
  onChange={(event) => {
    this.setState({ rememberMeValue: !this.state.rememberMeValue });
    event.target.value = this.state.rememberMeValue;
    rememberMe.events.onChange(event);
  }}
>
  Remember me
</Checkbox>

I guess checkboxes aren't supported by formous, are they?

Doesn't support IE 9-11

Object doesn't support property or method 'findIndex'