Custom Json Schema Validation Keywords (SVK)

Using ajv as plugin, the Schema Validation Keywords (SVK) funcionalities will be enabled and can be extended too.

See the ajv documentation: Defining Custom Keywords for a deeper explaination

Below we see how to implement it in mobx-react-form:

Define a keywords object with the custom keyword

const keywords = {
  /**
    Define a `range` keyword
  */
  range: {
    type: 'number',
    compile: (sch, parentSchema) => {
      const min = sch[0];
      const max = sch[1];

      return parentSchema.exclusiveRange === true
              ? (data) => (data > min && data < max)
              : (data) => (data >= min && data <= max);
    },
  },
};

Define a JSON schema using the new keyword

var $schema = {
  type: 'object',
  properties: {
    fieldname: {
      "range": [2, 4],
      "exclusiveRange": true,
    },
  },
};

Implement the extend callback for the plugins object

The extend function takes in input an object with the following props:

• the form instance
• the validator instance

import svk from 'mobx-react-form/lib/validators/SVK';
import ajv from 'ajv';

const plugins = {
  svk: svk({
    package: ajv,
    schema: $schema,
    options: { ... }, // ajv options
    extend: ({ validator, form }) => {
      // here we can access the `ajv` instance (validator) and we can
      // add the keywords of our object using the `addKeyword()` method.
      Object.keys(keywords).forEach((key) =>
        validator.addKeyword(key, keywords[key]));
    };
  }),
};

// create the form using extended plugins

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

VERSION < 1.37

No need to import the plugin function:

import ajv from 'ajv';

const plugins = {
  svk: {
    package: ajv,
    extend: () => { ... },
  },
};

and the schema goes to the form initialization:

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

See here more info about epoberezkin/ajv options.