Simple Form
Простая форма регистрации пользователя.

import React from 'react';
import ReactDOM from 'react-dom';
import { Form as AntForm, Input, Button, Modal } from 'antd';
import { Form } from 'rx-model';
import {
  PresenceValidator, EmailValidator, StringValidator,
} from 'rx-model/validators';
import { FormConnect } from 'react-rx-form';

class SimpleForm extends Form {
  // правила валидации
  rules() {
    return {
      name: new PresenceValidator(),
      email: [
        new PresenceValidator(),
        new EmailValidator(),
      ],
      password: [
        new PresenceValidator(),
        new StringValidator({
          minLength: 6
        }),
      ],
    }
  }
}

const FormItem = AntForm.Item;

export default class SimpleFormComponent extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      form: new SimpleForm()
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  setAttributeRef(attr, el) {
    this[`attr_${attr}`] = el;
  }

  getAttributeRef(attr) {
    return this[`attr_${attr}`];
  }

  // фокус компонента не прошедшего валидацию
  focus(component) {
    if (component.focus) {
      component.focus();
    } else if (component.getWrappedInstance) {
      component = component.getWrappedInstance();
      this.focus(component);
    } else {
      component = ReactDOM.findDOMNode(component);
      component && component.focus();
    }
  }

  handleSubmit() {
    const { form } = this.state;

    form.validate().then(isValid => {
      if (isValid) {
        const attributes = form.getAttributes();

        Modal.success({
          title: 'Attributes',
          content: <pre>{JSON.stringify(attributes, null, "  ")}</pre>,
        })
      } else {
        const error = form.getFirstError();
        const component = this.getAttributeRef(error.attribute);

        component && this.focus(component);
      }
    })
  }

  render() {
    const { form } = this.state;

    return (
      <AntForm>
        <FormConnect
          form={form}
          whenModel={['name']}
        >{() => {
          return <FormItem
            label={<span><b>name</b></span>}
            validateStatus={form.getValidationStatus('name')}
            help={form.getValidationError('name')}
            required={form.isAttributeRequired('name')}
          >
            <Input
              ref={el => this.setAttributeRef('name', el)}
              value={form.getAttribute('name')}
              onChange={(e) => form.setAttribute('name', e.target.value)}
              onBlur={() => form.validateAttributes(['name'])}
              disabled={!form.isAttributeSafe('name')}
            />
          </FormItem>
        }}</FormConnect>

        <FormConnect
          form={form}
          whenModel={['email']}
        >{() => {
          return <FormItem
            label={<span><b>email</b></span>}
            validateStatus={form.getValidationStatus('email')}
            help={form.getValidationError('email')}
            required={form.isAttributeRequired('email')}
          >
            <Input
              ref={el => this.setAttributeRef('email', el)}
              value={form.getAttribute('email')}
              onChange={(e) => form.setAttribute('email', e.target.value)}
              onBlur={() => form.validateAttributes(['email'])}
              disabled={!form.isAttributeSafe('email')}
            />
          </FormItem>
        }}</FormConnect>

        <FormConnect
          form={form}
          whenModel={['password']}
        >{() => {
          return <FormItem
            label={<span><b>password</b> (минимум 6 символов)</span>}
            validateStatus={form.getValidationStatus('password')}
            help={form.getValidationError('password')}
            required={form.isAttributeRequired('password')}
          >
            <Input
              ref={el => this.setAttributeRef('password', el)}
              value={form.getAttribute('password')}
              onChange={(e) => form.setAttribute('password', e.target.value)}
              onBlur={() => form.validateAttributes(['password'])}
              disabled={!form.isAttributeSafe('password')}
            />
          </FormItem>
        }}</FormConnect>

        <FormItem>
          <Button onClick={this.handleSubmit}>Submit</Button>
        </FormItem>
      </AntForm>
    );
  }
}