@roqueform/zod-plugin

Zod plugin for Roqueform

Validates Roqueform fields with Zod schemas.

npm install --save-prod @roqueform/zod-plugin

Overview

Create a schema that would parse the field value:

import { z } from 'zod';

const fieldSchema = z.object({
  hello: z.string().max(5)
});

zodPlugin works best in conjunction with errorsPlugin:

import { createField } from 'roqueform';
import errorsPlugin from 'roqueform/plugin/errors';
import zodPlugin, { concatZodIssues } from '@roqueform/zod';

const field = createField({ hello: 'world' }, [
  errorsPlugin(concatZodIssues),
  zodPlugin(fieldSchema)
]);

The type of the field value is inferred from the provided schema, so the field value is statically checked.

When you call the validate method, it triggers validation of the field and all of its child fields. So if you call validate on the child field, it won't validate the parent field:

// 🟡 Set an invalid value to the field
field.at('hello').setValue('universe');

field.at('hello').validate();
// ⮕ false

field.at('hello').errors // ⮕ [{ code: 'too_small', … }]

In this example, field.value is not validated, and field.at('hello').value is validated.

To detect whether the field, or any of its child fields contain a validation error:

field.at('hello').isInvalid;
// ⮕ true