Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mantinedev/mantine-form-zod-resolver
Zod schema resolver for @mantine/form
https://github.com/mantinedev/mantine-form-zod-resolver
form mantine zod
Last synced: 2 months ago
JSON representation
Zod schema resolver for @mantine/form
- Host: GitHub
- URL: https://github.com/mantinedev/mantine-form-zod-resolver
- Owner: mantinedev
- License: mit
- Created: 2023-11-09T10:42:06.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-19T06:50:45.000Z (about 1 year ago)
- Last Synced: 2024-10-11T11:29:48.980Z (3 months ago)
- Topics: form, mantine, zod
- Language: TypeScript
- Homepage: https://mantine.dev/form/schema-validation/#zod
- Size: 990 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mantine-form-zod-resolver
[zod](https://www.npmjs.com/package/zod) resolver for [@mantine/form](https://mantine.dev/form/use-form/).
## Installation
With yarn:
```sh
yarn add zod mantine-form-zod-resolver
```
With npm:
```sh
npm install zod mantine-form-zod-resolver
```
## Basic fields validation
```tsx
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
```tsx
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
```tsx
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