Provide Form.onChange?

[bebraw]

I am building a small editor. The idea is that I construct a form based on JSON schema and then render out an invoice based on the value as they change. I would like the changes to be instant.

Would it make sense to provide an onChange method that gets triggered whenever the form changes somehow? For this to work you might need to attach onChange handler per input and then trigger the form method. How does this sound?

[odf]

Yes, I like the general idea very much. What I find a bit unappealing, though, is that we would have to call that new onChange handler in addition to the form's setState method on every change.

An alternative might be to add a prop, say submitOnChange, that tells the form to call the onSubmit handler upon every change (or possibly only when transitioning into a valid state), and leave it to the caller to redraw the form with the new values. This would also allow one to modify the form dynamically depending on inputs (e.g. generating auto-complete drop-downs on the fly) without having to add any special hooks to the form component itself.

[bebraw]

An alternative might be to add a prop, say submitOnChange, that tells the form to call the onSubmit handler upon every change (or possibly only when transitioning into a valid state), and leave it to the caller to redraw the form with the new values. This would also allow one to modify the form dynamically depending on inputs (e.g. generating auto-complete drop-downs on the fly) without having to add any special hooks to the form component itself.

This would be enough I think. It's a good extension point.

[odf]

I've implemented this in 7908c99eabb522c8da02651044f3c3fa62d39231. The form needs to be passed submitOnChange: true, and in addition, it needs to be fed back its own output in the values property.

A small side effect is that the form cannot automatically strip trailing white space from string fields any more.

[bebraw]

What's the correct way to deal with the loopback (ie. passing values back to Form)?

[bebraw]

Nevermind. Got it... I had to do this:

onSubmit: function(output, value, errors) {
    this.setState({
        values: output
    });
},

and then on jsx

<Form
    buttons={[]}
    schema={this.state.schema}
    validate={validate}
    submitOnChange={true}
    onSubmit={this.onSubmit}
    values={this.state.values}
/>

[odf]

That's it.