Enabling ZOD TypeScript-first schema validation

colinhacks/zod is not included in the package, so you have to install it manually.

First of all install colinhacks/zod to enable the ZOD plugin.

npm install --save zod

Define the ZOD schema

const $schema = z.object({
    products: z.array(
        z.object({
            name: z.string().min(3),
            qty: z.number().min(0),
            amount: z.number().min(0),
        }))
        .optional(),
})

Define a plugins object

Pass the ZOD package and the previously defined schema to the ZOD plugin.

import zod from 'mobx-react-form/lib/validators/ZOD';
import z from 'zod';

const plugins = {
  zod: zod({
    package: z,
    schema: $schema,
    extend: ({ validator, form }) => {
      ... // access zod validator and form instances
    },
  })
};

Create the form passing the plugins object

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