Feature proposal: Error messages should bubble up when using nested fields

[prayerslayer]

Hi,

first of all thanks for your effort on this library, I think it can save lots of time, also for quite complicated forms.

When implementing it in our multi-step, nested form I encountered a few situations where I'd personally like to see the API extended or bugs fixed. So I'll open some issues regarding feature proposals and bug reports, let me know if I can help out with fixing those.

So first of all, I'd find it really cool if error messages would bubble up. Consider a wizard-like form, let's say for placing an order for the first time. You'll have to enter payment details, shipping address, possibly billing address, some signup data etc. I can make a nested form like this (form field definitions not included because they are quite verbose):

@observer
class OrderForm extends React.Component {
  constructor() {
    this.form = new MobxReactForm(/*...*/);
  }
  render() {
    return <Wizard>
      <WizardStep>
        <SignupForm form={this.form.$('signup')} />
      </WizardStep>
      <WizardStep>
        <ShippingForm form={this.form.$('shipping')} />
      </WizardStep>
      <WizardStep>
        <BillingForm form={this.form.$('billing')} />
      </WizardStep>
      <WizardStep>
        <ConfirmOrder form={this.form} />
      </WizardStep>
    </Wizard>
  }
}

(I hope you get the idea.)

Now, if I don't want to force my users to complete one step after another (because they are independent), I'd like to show the invalid parts of the order form along with actual error messages in the confirm step. Currently I can't do that. I can iterate through the fields and check field.isValid and then print a generic message. But what would be nicer in my opinion is if the error field would be an array, and nested errors bubble up, similar to the isValid flag.

I hope that makes sense, let me know what you think.