Form.error doesn't update

When I submit my form, OnError hook event executes and gets form.errors() correctly, however form.validator.error is undefined.

My form component:

import React from 'react';
import { observer } from 'mobx-react';

export default observer(({ form }) => (
  <form onSubmit={form.onSubmit}>
    <label htmlFor={form.$('username').id}>
      {form.$('username').label}
    </label>
    <input {...form.$('username').bind()} />
    <button type="submit" onClick={form.onSubmit}>Submit</button>
    <p>{form.error}</p>
  </form>
));

My form:

import { dispatch } from 'rfx-core';
import validatorJs from 'validatorjs';
import MobxReactForm from 'mobx-react-form';
import _ from 'lodash';

const plugins = { dvr: validatorJs };

const hooks = {
  onSuccess(form) {
    return dispatch('document.add', form.values())
      .then(() => form.clear())
      .then(() => dispatch('ui.snackBar.open', 'Document added'))
      .catch((err) => {
        dispatch('ui.snackBar.open', err.message);
      });
  },
  onError(form) {
    const errors = _.filter(form.errors(), err => err !== null);
    const keys = _.keys(errors);
    console.log(this.validator);
    dispatch('ui.snackBar.open', errors[_.head(keys)]);
  },
};

const fields = [{
  name: 'username',
  label: 'Username',
  placeholder: 'Insert username',
  rules: 'required|string|between:5,25',
}];

const form = new MobxReactForm({ fields }, { plugins, hooks });

export default form;

Where I use my form component:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import { inject, observer } from 'mobx-react';
import { dispatch } from 'rfx-core';
import { translate } from 'react-i18next';
import { authorize } from '@/utils/authorize.hoc';
import Upload from '../components/form/UploadDocument';

@inject('store') @observer @authorize
class UploadDocument extends Component {
  static fetchData() {}

  static propTypes = {
    store: PropTypes.object,
    t: PropTypes.func,
  };

  componentWillMount() {
    const { t } = this.props;
    dispatch('ui.appBar.setTitle', t('title.upload'));
  }

  render() {
    const { ui } = this.props.store;
    return (
      <div className="main">
        <Helmet title={ui.appBar.title} />
        <Upload form={ui.settings.uploadForm} />
      </div>
    );
  }
}

export default translate('settings')(UploadDocument);

foxhound87 / mobx-react-form-demo

Form.error doesn't update #15