mantine-form-zod-resolver's Introduction

mantine-form-zod-resolver

Installation

With yarn:

yarn add zod mantine-form-zod-resolver

With npm:

npm install zod mantine-form-zod-resolver

Basic fields validation

import { z } from 'zod';
import { useForm } from '@mantine/form';
import { zodResolver } from 'mantine-form-zod-resolver';

const schema = z.object({
  name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
  email: z.string().email({ message: 'Invalid email' }),
  age: z.number().min(18, { message: 'You must be at least 18 to create an account' }),
});

const form = useForm({
  initialValues: {
    name: '',
    email: '',
    age: 16,
  },
  validate: zodResolver(schema),
});

form.validate();
form.errors;
// -> {
//  name: 'Name should have at least 2 letters',
//  email: 'Invalid email',
//  age: 'You must be at least 18 to create an account'
// }

Nested fields validation

import { z } from 'zod';
import { useForm } from '@mantine/form';
import { zodResolver } from 'mantine-form-zod-resolver';

const nestedSchema = z.object({
  nested: z.object({
    field: z.string().min(2, { message: 'Field should have at least 2 letters' }),
  }),
});

const form = useForm({
  initialValues: {
    nested: {
      field: '',
    },
  },
  validate: zodResolver(nestedSchema),
});

form.validate();
form.errors;
// -> {
//  'nested.field': 'Field should have at least 2 letters',
// }

List fields validation

import { z } from 'zod';
import { useForm } from '@mantine/form';
import { zodResolver } from 'mantine-form-zod-resolver';

const listSchema = z.object({
  list: z.array(
    z.object({
      name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
    })
  ),
});

const form = useForm({
  initialValues: {
    list: [{ name: '' }],
  },
  validate: zodResolver(listSchema),
});

form.validate();
form.errors;
// -> {
//  'list.0.name': 'Name should have at least 2 letters',
// }

API:

ZodResolverOptions

zodResolver takes as an optional second parameter some zodResolverOptions.

Name	Type	Description
`errorPriority`	`first` \| `last` \| undefined	In case a field can display multiple error message, set `errorPriority` to `first` to display the message of the first failing check, or set `errorPriority` to `last` to display the message of the last failing check (default).

License

MIT

mantine-form-zod-resolver's People

Contributors

Stargazers

Watchers

mantine-form-zod-resolver's Issues

ZodResolver and useForm generic type

ZodResolved throws ts error when you are using useForm hook and passing generic type.

  interface Test {
    firstName: string;
    lastName: string;
    collegeName: string;
    sports: string[];
    college: Maybe<College>;
    agreedToTerms: boolean;
  }

  const form = useForm<Test>({
    validateInputOnBlur: true,
    validateInputOnChange: true,
    clearInputErrorOnChange: true,
    initialValues: {
      lastName: '',
      firstName: '',
      collegeName: '',
      sports: [],
      college: null,
      agreedToTerms: false,
    },
    validate: zodResolver(validatedRules),
  });

Here ts error

Diagnostics:
1. Type '(values: Record<string, unknown>) => FormErrors' is not assignable to type 'FormValidateInput<Test> | undefined'.
     Type '(values: Record<string, unknown>) => FormErrors' is not assignable to type '(values: Test) => FormErrors'.
       Types of parameters 'values' and 'values' are incompatible.
         Type 'Test' is not assignable to type 'Record<string, unknown>'.
           Index signature for type 'string' is missing in type 'Test'. [2322] [2322]

Is it supposed to work or I missing something ? Thank you.

Recommend Projects