mkozhukharenko

import { observable } from 'mobx'
import GenericFormStore from './../common/generic-form.store'

export default class LoginStore extends GenericFormStore {
  @observable
  form = {/* form model */}
}

mkozhukharenko

import {action, toJS} from 'mobx'
import Validator from 'validatorjs';

class FormStore {
  getFlattenedValues = (valueKey = 'value') => {
    let data = {};
    let form = toJS(this.form).fields;
    Object.keys(form).map(key => {
      data[key] = form[key][valueKey]
    });

mkozhukharenko

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import LoginForm from './login/login-form.component';
import LoginStore from './login/login.store';

let loginStore = LoginStore();

@observer
class App extends Component {
  render() {

mkozhukharenko

import React, { Component, PropTypes } from 'react';
import FormInput from './../common/form-input'
import { observer } from 'mobx-react'

@observer
class LoginForm extends Component {
  render() {
    const {form, onChange} = this.props;
    return (
      <form onSubmit={this.submit}>

mkozhukharenko

import {action, observable} from 'mobx';
import Validator from 'validatorjs';

class LoginStore {
  @observable
  form = {
    fields: {
      email: {
        value: '',
        error: null,

mkozhukharenko

import React, { PropTypes } from 'react';
import classNames from 'classnames'

let getFormInputClasses = ({valid, error}) => classNames('form-input', {
    'form-input--error': !!error,
})

let FormInput = (props) => (
    <span className={getFormInputClasses(props)}>
      <input {...props}

mkozhukharenko

<FormInput name="name" 
           value={form.fields.name.value}
           error={form.fields.name.error}
           onChange={form.onFieldChange}
           placeholder="Enter your name"/>

mkozhukharenko

import Validator from 'validatorjs'
var data = {
  name: 'John',
  email: 'not-valid-email'
};
var rules = {
  name: 'required',
  email: 'required|email'
};
var validation = new Validator(data, rules);

mkozhukharenko

import { observable } from 'mobx'

export default class LoginStore {
  @observable
  form =  {
    fields: {
      email: {
        value: '', // binds to input value
        error: null // shows beneif the input
      },

mkozhukharenko

// trun {fiels: {email: 'val', err:''}} to {email: 'val'}
var getValues = () => {
    let data = {};
    let form = toJS(this.form).fields;
    Object.keys(form).map(key => {
      data[key] = form[key].value
    });
    return data
}