Test new version of Formsy-React with React 0.14

[christianalfoni]

Hello there!

I am working on the new release of Formsy-React, using the BETA version of React 0.14 (https://facebook.github.io/react/blog/2015/07/03/react-v0.14-beta-1.html). React 0.14 brings a long some necessary fixes to make Formsy take its next step.

It would be great if you could help test this new version and add any issues to the comments below. I have set up a small repo to make it as easy as possible for you to test the new functionality.

Get started

1. Clone the following repo: https://github.com/christianalfoni/formsy-test.git
2. npm install
3. npm start
4. Go to http://localhost:8080/webpack-dev-server/bundle

It is ready with ES6 syntax and JSX syntax, using Webpack and Babel.

Fixes in new version

• getErrorMessages() gives all registered errors
• required and validations props can now be changed at runtime and the form will re-validate itself
• You can now use application/x-www-form-urlencoded style on naming your elements (contacts[0][name]) and it will be converted to plain JS object

<MyInput name="persons[0][name]" value="Charles"/>
// form-data: { persons: [{name: 'Charles'}] }

• Elements no longer needs to have the same owner as the form element, nest and wrap as much as you want

<Formsy.Form>
 <MyElementsWrapper/> // Has some formsy elements children inside it
</Formsy.Form>

Warning

• There seems to be an issue with React 0.14 BETA 1 and the event object. If event.target.value is not available, use event.currentTarget.value

[twisty]

Hello there,

Some good stuff in this release, thanks!

I've been having trouble getting the multiple error messages to show (code below). The validations seem to be running correctly, but it seems to only return the generic "fallback" error message.

var React = require('react');
var ReactDOM = require('react-dom');
var Formsy = require('formsy-react');

var ValidationTest = React.createClass({

    mixins: [Formsy.Mixin],

    renderErrors() {
        var errorMessages = this.getErrorMessages() || [];
        return errorMessages.map((message, key) => {
              return (
                  <p key={key}>Error: {message}</p>
            );
        });
    },

    onChange(e) {
        this.setValue(e.currentTarget.value);
    },

    render() {
        return (
            <div>
                {this.isRequired() ? '* ' : ''}
                <input
                    type="text"
                    value={this.getValue()}
                    onChange={this.onChange}
                    required={this.props.required}
                />
                {this.renderErrors()}
            </div>
        );
    }

 });

var App = React.createClass({
    render() {
        return (
            <Formsy.Form onSubmit={(model) => { console.log(model); }} noValidate>
                <ValidationTest
                    name="nesting[for][the][win]"
                    validations={{
                        isEmail: true,
                        maxLength: 8
                    }}
                    validationErrors={{
                        isEmail: 'Is not an email address.',
                        maxLength: 'Maximum length is 8.'
                    }}
                    validationError="Generic error."
                    required
                />
                <input type="submit" />
            </Formsy.Form>
        )
    }
});

ReactDOM.render(<App/>, document.body);

[Semigradsky]

@twisty thanks for response!
Fixed in 89759fe

[twisty]

@Semigradsky super!

Here's an edge case for you! When the component is set as 'required', and the value is empty (i.e showRequired() is true) getErrorMessages() returns [undefined]. It feels like it should return [].

The work-around is to check for showRequired() before showing error messages, but the current behaviour doesn't seem intuitive. What do you think?

[Semigradsky]

Yeah, I think getErrorMessages should return [] instead of null
👍 357f4ad

[christianalfoni]

Hi guys!

@twisty thanks so much for taking the time to test!

@Semigradsky Great work, we are closing in on release :-)

NOTE! to get the latest version of master in the TEST-project, run npm install --force

[christianalfoni]

@Semigradsky Maybe create a couple of tests for these errors messages, I was not in the mood for it when I implemented... you know how it is ;-)

[richardaday]

Thanks for the great project. Does this version fix the issue presented in #110?

[christianalfoni]

@richardaday , jup it does :-)

[christianalfoni]

Hi there!

As soon as React 0.14 is released it will be released :-) The code is ready, working with React 0.14 Beta 1

[richardaday]

Anyway to publish it to npm with a beta version?

[elverskog]

Hi. Thanks for the great work. Really like the flexibility. Any plans to convert to using a decorator (or away from a mixin in some fashion)? I tried using react-mixin-decorator but the issue where dug too deep in to mess with it.

[christianalfoni]

Decorators will be part of next release :-)

[eriknyk]

Hi,
it is not good time to have ES6 classes support from here, at this branch?

Best Regards.

[christianalfoni]

Hm, I did not quite understand what you mean @eriknyk?

[christianalfoni]

New version out

[yesmeck]

Great! 🍻

[ericdfields]

Any updates here?