insin/newforms

Errors do not render when instantiating a Form instance

Closed this issue · 1 comments

I have the following form:

const SignupForm = forms.Form.extend({
  user_first_name: forms.CharField({label: 'First Name'}),
})

In my component, it is instantiated in the constructor:

  constructor(props) {
    super(props);

    this.state = {
      form: new SignupForm(),
    }
  }

It's then rendered:

render() {
    return <form onSubmit={this._onSubmit}>
      <forms.RenderForm form={this.state.form} ref="signupForm"/>
      <button>Sign Up</button>
    </form>
 }

Expected: (Behaviour when directly using <forms.RenderForm form={SignupForm} ref="signupForm"/>)

When a blur event occurs on a field, an error should be rendered:

image

Actual

No errors are rendered:

image

Taking this further, if we make a manual call to validate(), and check errors(), we can see that errors exist:

image

There's nowhere I have managed to find in the docs that states that this is the expected behaviour.

Solved this one by paying special attention to the instantiation in: https://github.com/insin/newforms-examples/blob/master/contact-form/app.jsx

Turns out you need to force a re-render using an onChange binding:

form: new SignupForm({
        validation: {on: 'change blur', delay: 500},
        onChange: this.forceUpdate.bind(this)
      }),