MobX valite form Store

A MobX form store using valite as validator.

Installation

This module is published under NPM Registry, so you can install using NPM, Yarn and other package managers.

npm install --save mobx-valite-form-store

# Use the command below if you're using Yarn.
yarn add mobx-valite-form-store

Usage

This module provides a store class to handle form states, validators & their error states.

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import FormStore from 'mobx-valite-form';

// An validator schema for entries object.
const validators = {
  name: [
    (name) => (typeof name === 'string' && !!name.trim()) || 'Name is a required entry.',
    (name) => (name.length > 2 && name.length < 30) || 'Name should have between 2 and 30 chars.'
  ]
};

@observer
export default class Form extends Component {
  @observable store = new FormStore({ name: '' }, validators);

  onSubmit = async () => {
    await this.store.validateEntries();

    if (!this.store.isValid)
      return;
    this.props.onSave(this.store.entries);
  };

  render () {
    return (
      <form>
        <input
          value={ this.store.entries.name }
          onChange={ (e) => this.store.setEntry('name', e.target.value) }
        />

        { this.store.errors.name && <span>{ this.store.errors.name }</span> }
      </form>
    );
  }
}

License

Released under MIT license.