Skip to content

feat(form-core): add parseValueWithSchema() stateless method #1421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions docs/framework/angular/guides/validation.md
Original file line number Diff line number Diff line change
@@ -499,6 +499,41 @@ export class AppComponent {
}
```

If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:

```angular-ts
@Component({
selector: 'app-root',
standalone: true,
imports: [TanStackField],
template: `
<ng-container
[tanstackField]="form"
name="age"
[validators]="{ onChangeAsync: ageValidator }"
#age="field"
>
<!-- ... -->
</ng-container>
`,
})
export class AppComponent {
ageValidator: FieldValidateAsyncFn<any, string, number> = async ({
value,
fieldApi,
}) => {
const errors = fieldApi.parseValueWithSchema(
z.number().gte(13, 'You must be 13 to make an account'),
)
if (errors) return errors

// continue with your validation
}

// ...
}
```

## Preventing invalid forms from being submitted

The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
21 changes: 21 additions & 0 deletions docs/framework/react/guides/validation.md
Original file line number Diff line number Diff line change
@@ -503,6 +503,27 @@ Async validations on form and field level are supported as well:
/>
```

If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:

```tsx
<form.Field
name="age"
asyncDebounceMs={500}
validators={{
onChangeAsync: async ({ value, fieldApi }) => {
const errors = fieldApi.parseValueWithSchema(
z.number().gte(13, 'You must be 13 to make an account'),
)
if (errors) return errors
// continue with your validation
},
}}
children={(field) => {
return <>{/* ... */}</>
}}
/>
```

## Preventing invalid forms from being submitted

The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
22 changes: 22 additions & 0 deletions docs/framework/solid/guides/validation.md
Original file line number Diff line number Diff line change
@@ -390,6 +390,28 @@ Async validations on form and field level are supported as well:
/>
```

If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:

```tsx
<form.Field
name="age"
validators={{
onChange: ({ value, fieldApi }) => {
const errors = fieldApi.parseValueWithSchema(
z.number().gte(13, 'You must be 13 to make an account'),
)

if (errors) return errors

// continue with your validation
},
}}
children={(field) => {
return <>{/* ... */}</>
}}
/>
```

## Preventing invalid forms from being submitted

The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
27 changes: 27 additions & 0 deletions docs/framework/vue/guides/validation.md
Original file line number Diff line number Diff line change
@@ -442,6 +442,33 @@ Async validations on form and field level are supported as well:
</template>
```

If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:

```vue
<template>
<!-- ... -->
<form.Field
name="age"
:validators="{
onChange: ({ value, fieldApi }) => {
const errors = fieldApi.parseValueWithSchema(
z.number().gte(13, 'You must be 13 to make an account'),
)

if (errors) return errors

// continue with your validation
},
}"
>
<template v-slot="{ field }">
<!-- ... -->
</template>
</form.Field>
<!-- ... -->
</template>
```

## Preventing invalid forms from being submitted

The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.
57 changes: 57 additions & 0 deletions docs/reference/classes/fieldapi.md
Original file line number Diff line number Diff line change
@@ -343,6 +343,63 @@ Moves the value at the first specified index to the second specified index.

***

### parseValueWithSchema()

```ts
parseValueWithSchema(schema):
| undefined
| StandardSchemaV1Issue[]
```

Defined in: [packages/form-core/src/FieldApi.ts:1651](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1651)

Parses the field's value with the given schema and returns
issues (if any). This method does NOT set any internal errors.

#### Parameters

##### schema

[`StandardSchemaV1`](../type-aliases/standardschemav1.md)\<`TData`, `unknown`\>

The standard schema to parse this field's value with.

#### Returns

\| `undefined`
\| [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]

***

### parseValueWithSchemaAsync()

```ts
parseValueWithSchemaAsync(schema): Promise<
| undefined
| StandardSchemaV1Issue[]>
```

Defined in: [packages/form-core/src/FieldApi.ts:1663](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1663)

Parses the field's value with the given schema and returns
issues (if any). This method does NOT set any internal errors.

#### Parameters

##### schema

[`StandardSchemaV1`](../type-aliases/standardschemav1.md)\<`TData`, `unknown`\>

The standard schema to parse this field's value with.

#### Returns

`Promise`\<
\| `undefined`
\| [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>

***

### pushValue()

```ts
69 changes: 69 additions & 0 deletions docs/reference/classes/formapi.md
Original file line number Diff line number Diff line change
@@ -422,6 +422,75 @@ Moves the value at the first specified index to the second specified index withi

***

### parseValuesWithSchema()

```ts
parseValuesWithSchema(schema):
| undefined
| {
fields: Record<string, StandardSchemaV1Issue[]>;
form: Record<string, StandardSchemaV1Issue[]>;
}
```

Defined in: [packages/form-core/src/FormApi.ts:2075](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2075)

Parses the form's values with a given standard schema and returns
issues (if any). This method does NOT set any internal errors.

#### Parameters

##### schema

[`StandardSchemaV1`](../type-aliases/standardschemav1.md)\<`TFormData`, `unknown`\>

The standard schema to parse the form values with.

#### Returns

\| `undefined`
\| \{
`fields`: `Record`\<`string`, [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>;
`form`: `Record`\<`string`, [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>;
\}

***

### parseValuesWithSchemaAsync()

```ts
parseValuesWithSchemaAsync(schema): Promise<
| undefined
| {
fields: Record<string, StandardSchemaV1Issue[]>;
form: Record<string, StandardSchemaV1Issue[]>;
}>
```

Defined in: [packages/form-core/src/FormApi.ts:2087](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2087)

Parses the form's values with a given standard schema and returns
issues (if any). This method does NOT set any internal errors.

#### Parameters

##### schema

[`StandardSchemaV1`](../type-aliases/standardschemav1.md)\<`TFormData`, `unknown`\>

The standard schema to parse the form values with.

#### Returns

`Promise`\<
\| `undefined`
\| \{
`fields`: `Record`\<`string`, [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>;
`form`: `Record`\<`string`, [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>;
\}\>

***

### pushFieldValue()

```ts
2 changes: 1 addition & 1 deletion docs/reference/functions/isstandardschemavalidator.md
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ title: isStandardSchemaValidator
function isStandardSchemaValidator(validator): validator is StandardSchemaV1<unknown, unknown>
```

Defined in: [packages/form-core/src/standardSchemaValidator.ts:75](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L75)
Defined in: [packages/form-core/src/standardSchemaValidator.ts:90](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L90)

## Parameters

1 change: 1 addition & 0 deletions docs/reference/index.md
Original file line number Diff line number Diff line change
@@ -59,6 +59,7 @@ title: "@tanstack/form-core"
- [Nullable](type-aliases/nullable.md)
- [ObjectAccessor](type-aliases/objectaccessor.md)
- [StandardSchemaV1](type-aliases/standardschemav1.md)
- [TStandardSchemaValidatorIssue](type-aliases/tstandardschemavalidatorissue.md)
- [TStandardSchemaValidatorValue](type-aliases/tstandardschemavalidatorvalue.md)
- [TupleAccessor](type-aliases/tupleaccessor.md)
- [UnknownAccessor](type-aliases/unknownaccessor.md)
6 changes: 3 additions & 3 deletions docs/reference/interfaces/standardschemav1issue.md
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ title: StandardSchemaV1Issue

# Interface: StandardSchemaV1Issue

Defined in: [packages/form-core/src/standardSchemaValidator.ts:144](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L144)
Defined in: [packages/form-core/src/standardSchemaValidator.ts:159](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L159)

The issue interface of the failure output.

@@ -19,7 +19,7 @@ The issue interface of the failure output.
readonly message: string;
```

Defined in: [packages/form-core/src/standardSchemaValidator.ts:148](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L148)
Defined in: [packages/form-core/src/standardSchemaValidator.ts:163](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L163)

The error message of the issue.

@@ -31,6 +31,6 @@ The error message of the issue.
readonly optional path: readonly (PropertyKey | StandardSchemaV1PathSegment)[];
```

Defined in: [packages/form-core/src/standardSchemaValidator.ts:152](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L152)
Defined in: [packages/form-core/src/standardSchemaValidator.ts:167](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L167)

The path of the issue, if any.
2 changes: 1 addition & 1 deletion docs/reference/type-aliases/standardschemav1.md
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ title: StandardSchemaV1
type StandardSchemaV1<Input, Output> = object;
```

Defined in: [packages/form-core/src/standardSchemaValidator.ts:83](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L83)
Defined in: [packages/form-core/src/standardSchemaValidator.ts:98](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L98)

The Standard Schema interface.

18 changes: 18 additions & 0 deletions docs/reference/type-aliases/tstandardschemavalidatorissue.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
id: TStandardSchemaValidatorIssue
title: TStandardSchemaValidatorIssue
---

<!-- DO NOT EDIT: this page is autogenerated from the type comments -->

# Type Alias: TStandardSchemaValidatorIssue\<TSource\>

```ts
type TStandardSchemaValidatorIssue<TSource> = TSource extends "form" ? object : TSource extends "field" ? StandardSchemaV1Issue[] : never;
```

Defined in: [packages/form-core/src/standardSchemaValidator.ts:11](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L11)

## Type Parameters

• **TSource** *extends* [`ValidationSource`](validationsource.md) = [`ValidationSource`](validationsource.md)
8 changes: 5 additions & 3 deletions docs/reference/type-aliases/tstandardschemavalidatorvalue.md
Original file line number Diff line number Diff line change
@@ -5,10 +5,10 @@ title: TStandardSchemaValidatorValue

<!-- DO NOT EDIT: this page is autogenerated from the type comments -->

# Type Alias: TStandardSchemaValidatorValue\<TData\>
# Type Alias: TStandardSchemaValidatorValue\<TData, TSource\>

```ts
type TStandardSchemaValidatorValue<TData> = object;
type TStandardSchemaValidatorValue<TData, TSource> = object;
```

Defined in: [packages/form-core/src/standardSchemaValidator.ts:3](https://github.com/TanStack/form/blob/main/packages/form-core/src/standardSchemaValidator.ts#L3)
@@ -17,12 +17,14 @@ Defined in: [packages/form-core/src/standardSchemaValidator.ts:3](https://github

• **TData**

• **TSource** *extends* [`ValidationSource`](validationsource.md) = [`ValidationSource`](validationsource.md)

## Type declaration

### validationSource

```ts
validationSource: ValidationSource;
validationSource: TSource;
```

### value
Loading