Skip to content

Commit 57f8294

Browse files
PascalmhPascalmh
committed
Merge remote-tracking branch 'upstream/main' into reset-form-delete-children
# Conflicts: # packages/form-core/tests/FieldApi.spec.ts # packages/form-core/tests/FormApi.spec.ts
2 parents 3c2cfda + b5ea568 commit 57f8294

File tree

72 files changed

+795
-165
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+795
-165
lines changed

‎docs/framework/angular/guides/validation.md

+35
Original file line numberDiff line numberDiff line change
@@ -499,6 +499,41 @@ export class AppComponent {
499499
}
500500
```
501501

502+
If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
503+
504+
```angular-ts
505+
@Component({
506+
selector: 'app-root',
507+
standalone: true,
508+
imports: [TanStackField],
509+
template: `
510+
<ng-container
511+
[tanstackField]="form"
512+
name="age"
513+
[validators]="{ onChangeAsync: ageValidator }"
514+
#age="field"
515+
>
516+
<!-- ... -->
517+
</ng-container>
518+
`,
519+
})
520+
export class AppComponent {
521+
ageValidator: FieldValidateAsyncFn<any, string, number> = async ({
522+
value,
523+
fieldApi,
524+
}) => {
525+
const errors = fieldApi.parseValueWithSchema(
526+
z.number().gte(13, 'You must be 13 to make an account'),
527+
)
528+
if (errors) return errors
529+
530+
// continue with your validation
531+
}
532+
533+
// ...
534+
}
535+
```
536+
502537
## Preventing invalid forms from being submitted
503538

504539
The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.

‎docs/framework/react/guides/basic-concepts.md

+16-10
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,15 @@ You can create options for your form so that it can be shared between multiple f
1212
Example:
1313

1414
```tsx
15+
interface User {
16+
firstName: string
17+
lastName: string
18+
hobbies: Array<string>
19+
}
20+
const defaultUser: User = { firstName: '', lastName: '', hobbies: [] }
21+
1522
const formOpts = formOptions({
16-
defaultValues: {
17-
firstName: '',
18-
lastName: '',
19-
hobbies: [],
20-
} as Person,
23+
defaultValues: defaultUser,
2124
})
2225
```
2326

@@ -38,16 +41,19 @@ const form = useForm({
3841
You may also create a form instance without using `formOptions` by using the standalone `useForm` API:
3942

4043
```tsx
44+
interface User {
45+
firstName: string
46+
lastName: string
47+
hobbies: Array<string>
48+
}
49+
const defaultUser: User = { firstName: '', lastName: '', hobbies: [] }
50+
4151
const form = useForm({
52+
defaultValues: defaultUser,
4253
onSubmit: async ({ value }) => {
4354
// Do something with form data
4455
console.log(value)
4556
},
46-
defaultValues: {
47-
firstName: '',
48-
lastName: '',
49-
hobbies: [],
50-
} as Person,
5157
})
5258
```
5359

‎docs/framework/react/guides/validation.md

+21
Original file line numberDiff line numberDiff line change
@@ -503,6 +503,27 @@ Async validations on form and field level are supported as well:
503503
/>
504504
```
505505
506+
If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
507+
508+
```tsx
509+
<form.Field
510+
name="age"
511+
asyncDebounceMs={500}
512+
validators={{
513+
onChangeAsync: async ({ value, fieldApi }) => {
514+
const errors = fieldApi.parseValueWithSchema(
515+
z.number().gte(13, 'You must be 13 to make an account'),
516+
)
517+
if (errors) return errors
518+
// continue with your validation
519+
},
520+
}}
521+
children={(field) => {
522+
return <>{/* ... */}</>
523+
}}
524+
/>
525+
```
526+
506527
## Preventing invalid forms from being submitted
507528
508529
The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.

‎docs/framework/solid/guides/validation.md

+22
Original file line numberDiff line numberDiff line change
@@ -390,6 +390,28 @@ Async validations on form and field level are supported as well:
390390
/>
391391
```
392392

393+
If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
394+
395+
```tsx
396+
<form.Field
397+
name="age"
398+
validators={{
399+
onChange: ({ value, fieldApi }) => {
400+
const errors = fieldApi.parseValueWithSchema(
401+
z.number().gte(13, 'You must be 13 to make an account'),
402+
)
403+
404+
if (errors) return errors
405+
406+
// continue with your validation
407+
},
408+
}}
409+
children={(field) => {
410+
return <>{/* ... */}</>
411+
}}
412+
/>
413+
```
414+
393415
## Preventing invalid forms from being submitted
394416

395417
The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.

‎docs/framework/vue/guides/validation.md

+27
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,33 @@ Async validations on form and field level are supported as well:
442442
</template>
443443
```
444444

445+
If you need even more control over your Standard Schema validation, you can combine a Standard Schema with a callback function like so:
446+
447+
```vue
448+
<template>
449+
<!-- ... -->
450+
<form.Field
451+
name="age"
452+
:validators="{
453+
onChange: ({ value, fieldApi }) => {
454+
const errors = fieldApi.parseValueWithSchema(
455+
z.number().gte(13, 'You must be 13 to make an account'),
456+
)
457+
458+
if (errors) return errors
459+
460+
// continue with your validation
461+
},
462+
}"
463+
>
464+
<template v-slot="{ field }">
465+
<!-- ... -->
466+
</template>
467+
</form.Field>
468+
<!-- ... -->
469+
</template>
470+
```
471+
445472
## Preventing invalid forms from being submitted
446473

447474
The `onChange`, `onBlur` etc... callbacks are also run when the form is submitted and the submission is blocked if the form is invalid.

‎docs/philosophy.md

+8-4
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,15 @@ useForm<MyForm>()
5252
You should do:
5353

5454
```typescript
55+
interface Person {
56+
name: string
57+
age: number
58+
}
59+
60+
const defaultPerson: Person = { name: 'Bill Luo', age: 24 }
61+
5562
useForm({
56-
defaultValues: {
57-
name: 'Bill Luo',
58-
age: 24,
59-
} as MyForm,
63+
defaultValues: defaultPerson,
6064
})
6165
```
6266

‎docs/reference/classes/fieldapi.md

+57
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,63 @@ Moves the value at the first specified index to the second specified index.
343343
344344
***
345345
346+
### parseValueWithSchema()
347+
348+
```ts
349+
parseValueWithSchema(schema):
350+
| undefined
351+
| StandardSchemaV1Issue[]
352+
```
353+
354+
Defined in: [packages/form-core/src/FieldApi.ts:1651](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1651)
355+
356+
Parses the field's value with the given schema and returns
357+
issues (if any). This method does NOT set any internal errors.
358+
359+
#### Parameters
360+
361+
##### schema
362+
363+
[`StandardSchemaV1`](../type-aliases/standardschemav1.md)\<`TData`, `unknown`\>
364+
365+
The standard schema to parse this field's value with.
366+
367+
#### Returns
368+
369+
\| `undefined`
370+
\| [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]
371+
372+
***
373+
374+
### parseValueWithSchemaAsync()
375+
376+
```ts
377+
parseValueWithSchemaAsync(schema): Promise<
378+
| undefined
379+
| StandardSchemaV1Issue[]>
380+
```
381+
382+
Defined in: [packages/form-core/src/FieldApi.ts:1663](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1663)
383+
384+
Parses the field's value with the given schema and returns
385+
issues (if any). This method does NOT set any internal errors.
386+
387+
#### Parameters
388+
389+
##### schema
390+
391+
[`StandardSchemaV1`](../type-aliases/standardschemav1.md)\<`TData`, `unknown`\>
392+
393+
The standard schema to parse this field's value with.
394+
395+
#### Returns
396+
397+
`Promise`\<
398+
\| `undefined`
399+
\| [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>
400+
401+
***
402+
346403
### pushValue()
347404
348405
```ts

‎docs/reference/classes/formapi.md

+69
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,75 @@ Moves the value at the first specified index to the second specified index withi
422422
423423
***
424424
425+
### parseValuesWithSchema()
426+
427+
```ts
428+
parseValuesWithSchema(schema):
429+
| undefined
430+
| {
431+
fields: Record<string, StandardSchemaV1Issue[]>;
432+
form: Record<string, StandardSchemaV1Issue[]>;
433+
}
434+
```
435+
436+
Defined in: [packages/form-core/src/FormApi.ts:2075](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2075)
437+
438+
Parses the form's values with a given standard schema and returns
439+
issues (if any). This method does NOT set any internal errors.
440+
441+
#### Parameters
442+
443+
##### schema
444+
445+
[`StandardSchemaV1`](../type-aliases/standardschemav1.md)\<`TFormData`, `unknown`\>
446+
447+
The standard schema to parse the form values with.
448+
449+
#### Returns
450+
451+
\| `undefined`
452+
\| \{
453+
`fields`: `Record`\<`string`, [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>;
454+
`form`: `Record`\<`string`, [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>;
455+
\}
456+
457+
***
458+
459+
### parseValuesWithSchemaAsync()
460+
461+
```ts
462+
parseValuesWithSchemaAsync(schema): Promise<
463+
| undefined
464+
| {
465+
fields: Record<string, StandardSchemaV1Issue[]>;
466+
form: Record<string, StandardSchemaV1Issue[]>;
467+
}>
468+
```
469+
470+
Defined in: [packages/form-core/src/FormApi.ts:2087](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L2087)
471+
472+
Parses the form's values with a given standard schema and returns
473+
issues (if any). This method does NOT set any internal errors.
474+
475+
#### Parameters
476+
477+
##### schema
478+
479+
[`StandardSchemaV1`](../type-aliases/standardschemav1.md)\<`TFormData`, `unknown`\>
480+
481+
The standard schema to parse the form values with.
482+
483+
#### Returns
484+
485+
`Promise`\<
486+
\| `undefined`
487+
\| \{
488+
`fields`: `Record`\<`string`, [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>;
489+
`form`: `Record`\<`string`, [`StandardSchemaV1Issue`](../interfaces/standardschemav1issue.md)[]\>;
490+
\}\>
491+
492+
***
493+
425494
### pushFieldValue()
426495

427496
```ts

‎docs/reference/functions/isstandardschemavalidator.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ title: isStandardSchemaValidator
1111
function isStandardSchemaValidator(validator): validator is StandardSchemaV1<unknown, unknown>
1212
```
1313

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

1616
## Parameters
1717

‎docs/reference/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ title: "@tanstack/form-core"
4343
- [DeepKeyAndValueArray](type-aliases/deepkeyandvaluearray.md)
4444
- [DeepKeyAndValueObject](type-aliases/deepkeyandvalueobject.md)
4545
- [DeepKeyAndValueTuple](type-aliases/deepkeyandvaluetuple.md)
46-
- [DeepKeyAndValueUnknown](type-aliases/deepkeyandvalueunknown.md)
4746
- [DeepKeys](type-aliases/deepkeys.md)
4847
- [DeepKeysAndValues](type-aliases/deepkeysandvalues.md)
4948
- [DeepRecord](type-aliases/deeprecord.md)
@@ -60,6 +59,7 @@ title: "@tanstack/form-core"
6059
- [Nullable](type-aliases/nullable.md)
6160
- [ObjectAccessor](type-aliases/objectaccessor.md)
6261
- [StandardSchemaV1](type-aliases/standardschemav1.md)
62+
- [TStandardSchemaValidatorIssue](type-aliases/tstandardschemavalidatorissue.md)
6363
- [TStandardSchemaValidatorValue](type-aliases/tstandardschemavalidatorvalue.md)
6464
- [TupleAccessor](type-aliases/tupleaccessor.md)
6565
- [UnknownAccessor](type-aliases/unknownaccessor.md)

‎docs/reference/interfaces/anydeepkeyandvalue.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ title: AnyDeepKeyAndValue
77

88
# Interface: AnyDeepKeyAndValue
99

10-
Defined in: [packages/form-core/src/util-types.ts:24](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L24)
10+
Defined in: [packages/form-core/src/util-types.ts:22](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L22)
1111

1212
## Properties
1313

@@ -17,7 +17,7 @@ Defined in: [packages/form-core/src/util-types.ts:24](https://github.com/TanStac
1717
key: string;
1818
```
1919

20-
Defined in: [packages/form-core/src/util-types.ts:25](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L25)
20+
Defined in: [packages/form-core/src/util-types.ts:23](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L23)
2121

2222
***
2323

@@ -27,4 +27,4 @@ Defined in: [packages/form-core/src/util-types.ts:25](https://github.com/TanStac
2727
value: any;
2828
```
2929

30-
Defined in: [packages/form-core/src/util-types.ts:26](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L26)
30+
Defined in: [packages/form-core/src/util-types.ts:24](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L24)

0 commit comments

Comments
 (0)