Errors do not render when instantiating a Form instance
Closed this issue · 1 comments
nickw444 commented
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:
Actual
No errors are rendered:
Taking this further, if we make a manual call to validate(), and check errors(), we can see that errors exist:
There's nowhere I have managed to find in the docs that states that this is the expected behaviour.
nickw444 commented
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)
}),