Skip to content

Commit

Permalink
fix: allow standard schema validator on field validators without expl…
Browse files Browse the repository at this point in the history
…icit adapter (#1064)

* fix: allow standard schema validator on fields without adapter

* doc: mention standard schema in basic-concepts
  • Loading branch information
Balastrong authored Dec 11, 2024
1 parent e081aca commit 8e7ca78
Show file tree
Hide file tree
Showing 29 changed files with 625 additions and 342 deletions.
4 changes: 2 additions & 2 deletions docs/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -416,8 +416,8 @@
"label": "react",
"children": [
{
"label": "Balastrong's Tutorials",
"to": "framework/react/community/balastrongs-tutorials"
"label": "Balastrong's Tutorial",
"to": "framework/react/community/balastrong-tutorial"
}
]
}
Expand Down
15 changes: 10 additions & 5 deletions docs/framework/angular/guides/basic-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,14 +114,21 @@ export class AppComponent {
}
```

## Validation Adapters
## Validation with Schema Libraries

In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter`, `@tanstack/yup-form-adapter`, and `@tanstack/valibot-form-adapter` to enable usage with common schema validation tools like [Zod](https://zod.dev/), [Yup](https://github.com/jquense/yup), and [Valibot](https://valibot.dev/).
In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.

You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.

Supported libraries include:

- [Zod](https://zod.dev/)
- [Valibot](https://valibot.dev/)
- [ArkType](https://arktype.io/)

Example:

```angular-ts
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
@Component({
Expand All @@ -132,7 +139,6 @@ import { z } from 'zod'
<ng-container
[tanstackField]="form"
name="firstName"
[validatorAdapter]="zodValidator()"
[validators]="{
onChange: z.string().min(3, 'First name must be at least 3 characters'),
onChangeAsyncDebounceMs: 500,
Expand Down Expand Up @@ -166,7 +172,6 @@ export class AppComponent {
})
z = z
zodValidator = zodValidator
}
```

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: balastrongs-tutorials
title: Balastrong's Tutorials
id: balastrong-tutorial
title: Balastrong's Tutorial
---

TanStack Form maintainer [Balastrong](https://bsky.app/profile/leonardomontini.dev) has created a series of video tutorials showcasing the most relevant features of the library. You'll find step by step guides that give you some extra insights into what you can build with TanStack Form, plus some nice tips and tricks.
Expand Down
55 changes: 32 additions & 23 deletions docs/framework/react/guides/basic-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,34 +144,43 @@ Example:
/>
```

## Validation Adapters
## Validation with Schema Libraries

In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter`, `@tanstack/yup-form-adapter`, and `@tanstack/valibot-form-adapter` to enable usage with common schema validation tools like [Zod](https://zod.dev/), [Yup](https://github.com/jquense/yup), and [Valibot](https://valibot.dev/).
In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.

Example:
You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.

Supported libraries include:

- [Zod](https://zod.dev/)
- [Valibot](https://valibot.dev/)
- [ArkType](https://arktype.io/)

```tsx
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
const userSchema = z.object({
age: z.number().gte(13, 'You must be 13 to make an account'),
})

// ...
<form.Field
name="firstName"
validatorAdapter={zodValidator()}
validators={{
onChange: z.string().min(3, 'First name must be at least 3 characters'),
onChangeAsyncDebounceMs: 500,
onChangeAsync: z.string().refine(
async (value) => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return !value.includes('error')
},
{
message: "No 'error' allowed in first name",
},
),
}}
/>
function App() {
const form = useForm({
defaultValues: {
age: 0,
},
validators: {
onChange: userSchema,
},
})
return (
<div>
<form.Field
name="age"
children={(field) => {
return <>{/* ... */}</>
}}
/>
</div>
)
}
```

## Reactivity
Expand Down
14 changes: 9 additions & 5 deletions docs/framework/solid/guides/basic-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,20 +139,24 @@ Example:
/>
```

## Validation Adapters
## Validation with Schema Libraries

In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter`, `@tanstack/yup-form-adapter`, and `@tanstack/valibot-form-adapter` to enable usage with common schema validation tools like [Zod](https://zod.dev/), [Yup](https://github.com/jquense/yup), and [Valibot](https://valibot.dev/).
In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.

Example:
You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.

Supported libraries include:

- [Zod](https://zod.dev/)
- [Valibot](https://valibot.dev/)
- [ArkType](https://arktype.io/)

```tsx
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'

// ...
<form.Field
name="firstName"
validatorAdapter={zodValidator()}
validators={{
onChange: z.string().min(3, 'First name must be at least 3 characters'),
onChangeAsyncDebounceMs: 500,
Expand Down
15 changes: 9 additions & 6 deletions docs/framework/vue/guides/basic-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -146,22 +146,25 @@ Example:
</template>
```

## Validation Adapters
## Validation with Schema Libraries

In addition to hand-rolled validation options, we also provide adapters like `@tanstack/zod-form-adapter`, `@tanstack/yup-form-adapter`, and `@tanstack/valibot-form-adapter` to enable usage with common schema validation tools like [Zod](https://zod.dev/), [Yup](https://github.com/jquense/yup), and [Valibot](https://valibot.dev/).
In addition to hand-rolled validation options, we also support the [Standard Schema](https://github.com/standard-schema/standard-schema) specification.

Example:
You can define a schema using any of the libraries implementing the specification and pass it to a form or field validator.

Supported libraries include:

- [Zod](https://zod.dev/)
- [Valibot](https://valibot.dev/)
- [ArkType](https://arktype.io/)

```vue
<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
const form = useForm({
// ...
// Add a validator to support Zod usage in Form and Field
validatorAdapter: zodValidator(),
})
const onChangeFirstName = z.string().refine(
Expand Down
Loading

0 comments on commit 8e7ca78

Please sign in to comment.