Enabling JSON Schema Validation Keywords (AJV)

We are using ajv to enable Schema Validation Keywords (AJV) with automatic Error Messages.

Install ajv Package

ajv is not included in the package, so you have to install it manually.

npm install --save ajv

Create the json schema

See json-schema.org for more info

const $schema = {
  type: 'object',
  properties: {
    username: { type: 'string', minLength: 6, maxLength: 20 },
    password: { type: 'string', minLength: 6, maxLength: 20 }
  }
};

Define a plugins object

Pass the ajv package and the previously defined schema to the AJV plugin.

import ajv from 'mobx-formkit/lib/validators/AJV';
import Ajv from 'ajv';

const plugins = {
  ajv: ajv({
    package: Ajv,
    schema: $schema,
    options: { ... }, // ajv options
  })
};

VERSION < 1.37

No need to import the plugin function:

import Ajv from 'ajv';

const plugins = {
  ajv: Ajv
};

and the schema goes to the form initialization:

new Form({ ..., schema }, { plugins });

See here more info about epoberezkin/ajv options.

Create the form passing the plugins object

new Form({ ... }, { plugins });

Default AJV options used by mobx-formkit

{
  errorDataPath: 'property',
  allErrors: true,
  coerceTypes: true,
  v5: true,
}

Remove AJV Warnings from webpack

Add this line to your webpack config in the plugins array:

new webpack.IgnorePlugin(/regenerator|nodent|js\-beautify/, /ajv/)