diff --git a/docs/framework/angular/guides/arrays.md b/docs/framework/angular/guides/arrays.md index a77307785..d8c963eb8 100644 --- a/docs/framework/angular/guides/arrays.md +++ b/docs/framework/angular/guides/arrays.md @@ -66,7 +66,7 @@ Finally, you can use a subfield like so: ``` -Where `getPeopleName` is a method on the class like so +Where `getPeopleName` is a method on the class like so: ```typescript export class AppComponent { diff --git a/docs/framework/angular/guides/dynamic-validation.md b/docs/framework/angular/guides/dynamic-validation.md index 0ecff7434..15130adcb 100644 --- a/docs/framework/angular/guides/dynamic-validation.md +++ b/docs/framework/angular/guides/dynamic-validation.md @@ -3,7 +3,7 @@ id: dynamic-validation title: Dynamic Validation --- -In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular +In many cases, you want to change the validation rules depending on the state of the form or other conditions. The most popular example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not. We support this through our `onDynamic` validation function. diff --git a/docs/framework/angular/guides/submission-handling.md b/docs/framework/angular/guides/submission-handling.md index e5fae2477..96cf9f4f9 100644 --- a/docs/framework/angular/guides/submission-handling.md +++ b/docs/framework/angular/guides/submission-handling.md @@ -6,7 +6,7 @@ title: Submission handling ## Passing additional data to submission handling You may have multiple types of submission behaviour, for example, going back to another page or staying on the form. -You can accomplish this by specifying the `onSubmitMeta` property. This meta data will be passed to the `onSubmit` function. +You can accomplish this by specifying the `onSubmitMeta` property. This metadata will be passed to the `onSubmit` function. > Note: if `form.handleSubmit()` is called without metadata, it will use the provided default. @@ -65,7 +65,7 @@ export class AppComponent { ## Transforming data with Standard Schemas -While Tanstack Form provides [Standard Schema support](./validation.md) for validation, it does not preserve the Schema's output data. +While TanStack Form provides [Standard Schema support](./validation.md) for validation, it does not preserve the Schema's output data. The value passed to the `onSubmit` function will always be the input data. To receive the output data of a Standard Schema, parse it in the `onSubmit` function: diff --git a/docs/framework/angular/guides/validation.md b/docs/framework/angular/guides/validation.md index 85e676587..d171ae916 100644 --- a/docs/framework/angular/guides/validation.md +++ b/docs/framework/angular/guides/validation.md @@ -11,7 +11,7 @@ At the core of TanStack Form's functionalities is the concept of validation. Tan ## When is validation performed? -It's up to you! The `[tanstackField]` directive accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field.api.state.meta.errors`. +It's up to you! The `[tanstackField]` directive accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as a string and it will be available in `field.api.state.meta.errors`. Here is an example: @@ -138,7 +138,7 @@ export class AppComponent { } ``` -In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below. +In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc.). More info about displaying errors below. ## Displaying Errors @@ -204,7 +204,7 @@ export class AppComponent { } ``` -It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that: +It's worth mentioning that our `errors` array and the `errorMap` match the types returned by the validators. This means that: ```angular-ts @Component({ @@ -505,7 +505,7 @@ The synchronous validation method (`onBlur`) is run first and the asynchronous m ### Built-in Debouncing -While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDOS your database. +While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDoS your database. Instead, we enable an easy method for debouncing your `async` calls by adding a single property: diff --git a/docs/framework/lit/guides/arrays.md b/docs/framework/lit/guides/arrays.md index 311f928b6..2c14a4185 100644 --- a/docs/framework/lit/guides/arrays.md +++ b/docs/framework/lit/guides/arrays.md @@ -86,7 +86,7 @@ return html` export class TestForm extends LitElement { #form = new TanStackFormController(this, { defaultValues: { - people: [] as Array<{ name: string}>, + people: [] as Array<{ name: string }>, }, }); render() { diff --git a/docs/framework/lit/guides/dynamic-validation.md b/docs/framework/lit/guides/dynamic-validation.md index c601e4762..de30c40b4 100644 --- a/docs/framework/lit/guides/dynamic-validation.md +++ b/docs/framework/lit/guides/dynamic-validation.md @@ -3,7 +3,7 @@ id: dynamic-validation title: Dynamic Validation --- -In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular +In many cases, you want to change the validation rules depending on the state of the form or other conditions. The most popular example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not. We support this through our `onDynamic` validation function. diff --git a/docs/framework/lit/guides/validation.md b/docs/framework/lit/guides/validation.md index 4c8b693c4..b62245d05 100644 --- a/docs/framework/lit/guides/validation.md +++ b/docs/framework/lit/guides/validation.md @@ -11,7 +11,7 @@ At the core of TanStack Form's functionalities is the concept of validation. Tan ## When is validation performed? -It's up to you! The `field()` method accepts some callbacks as validators such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field.state.meta.errors`. +It's up to you! The `field()` method accepts some callbacks as validators such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as a string and it will be available in `field.state.meta.errors`. Here is an example: @@ -115,7 +115,7 @@ import { html, nothing } from 'lit' )}` ``` -In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below. +In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc.). More info about displaying errors below. ## Displaying Errors @@ -165,7 +165,7 @@ import { html, nothing } from 'lit' )}` ``` -It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that: +It's worth mentioning that our `errors` array and the `errorMap` match the types returned by the validators. This means that: ```ts import { html, nothing } from 'lit' @@ -450,7 +450,7 @@ The synchronous validation method (`onBlur`) is run first and the asynchronous m ### Built-in Debouncing -While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDOS your database. +While async calls are the way to go when validating against the database, running a network request on every keystroke is a good way to DDoS your database. Instead, we enable an easy method for debouncing your `async` calls by adding a single property: diff --git a/docs/framework/lit/quick-start.md b/docs/framework/lit/quick-start.md index 6f19510ad..6bcc16135 100644 --- a/docs/framework/lit/quick-start.md +++ b/docs/framework/lit/quick-start.md @@ -46,7 +46,7 @@ export class TestForm extends LitElement { }, }) render() { - return html`

Please enter your first name>

+ return html`

Please enter your first name

${this.#form.field( { name: `firstName`, diff --git a/docs/framework/react/guides/async-initial-values.md b/docs/framework/react/guides/async-initial-values.md index 527eb44e1..a8c647431 100644 --- a/docs/framework/react/guides/async-initial-values.md +++ b/docs/framework/react/guides/async-initial-values.md @@ -40,7 +40,7 @@ export default function App() { }, }) - if (isLoading) return

Loading..

+ if (isLoading) return

Loading...

return ( // ... diff --git a/docs/framework/react/guides/custom-errors.md b/docs/framework/react/guides/custom-errors.md index 0ecb12a07..346bc078a 100644 --- a/docs/framework/react/guides/custom-errors.md +++ b/docs/framework/react/guides/custom-errors.md @@ -5,7 +5,7 @@ title: Custom Errors TanStack Form provides complete flexibility in the types of error values you can return from validators. String errors are the most common and easy to work with, but the library allows you to return any type of value from your validators. -As a general rule, any truthy value is considered as an error and will mark the form or field as invalid, while falsy values (`false`, `undefined`, `null`, etc..) mean there is no error, the form or field is valid. +As a general rule, any truthy value is considered as an error and will mark the form or field as invalid, while falsy values (`false`, `undefined`, `null`, etc.) mean there is no error, the form or field is valid. ## Return String Values from Forms @@ -133,7 +133,7 @@ Display in UI: } ``` -in the example above it depends on the event error you want to display. +In the example above it depends on the event error you want to display. ### Arrays diff --git a/docs/framework/react/guides/debugging.md b/docs/framework/react/guides/debugging.md index 953b38af4..97940af60 100644 --- a/docs/framework/react/guides/debugging.md +++ b/docs/framework/react/guides/debugging.md @@ -36,7 +36,7 @@ If you see this error in the console when running `tsc`: Type instantiation is excessively deep and possibly infinite ``` -You've ran into a bug that we didn't catch in our type definitions. While we've done our best to make sure our types are as accurate as possible, there are some edge cases where TypeScript struggled with the complexity of our types. +You've run into a bug that we didn't catch in our type definitions. While we've done our best to make sure our types are as accurate as possible, there are some edge cases where TypeScript struggled with the complexity of our types. Please [report this issue to us on GitHub](https://github.com/TanStack/form/issues) so we can fix it. Just make sure to include a minimal reproduction so that we're able to help you debug. diff --git a/docs/framework/react/guides/devtools.md b/docs/framework/react/guides/devtools.md index 9a15e521b..3ffa830e3 100644 --- a/docs/framework/react/guides/devtools.md +++ b/docs/framework/react/guides/devtools.md @@ -3,11 +3,11 @@ id: devtools title: Devtools --- -TanStack Form comes with a ready to go suit of devtools. +TanStack Form comes with a ready to go suite of devtools. ## Setup -Install the [TanStack Devtools](https://tanstack.com/devtools/latest/docs/quick-start) library and the [TanStack Form plugin](http://npmjs.com/package/@tanstack/react-form-devtools), from the framework adapter that your working in (in this case `@tanstack/react-devtools`, and `@tanstack/react-form-devtools`). +Install the [TanStack Devtools](https://tanstack.com/devtools/latest/docs/quick-start) library and the [TanStack Form plugin](http://npmjs.com/package/@tanstack/react-form-devtools), from the framework adapter that you're working in (in this case `@tanstack/react-devtools`, and `@tanstack/react-form-devtools`). ```bash npm i @tanstack/react-devtools diff --git a/docs/framework/react/guides/dynamic-validation.md b/docs/framework/react/guides/dynamic-validation.md index b1d764ec2..4490b158e 100644 --- a/docs/framework/react/guides/dynamic-validation.md +++ b/docs/framework/react/guides/dynamic-validation.md @@ -3,7 +3,7 @@ id: dynamic-validation title: Dynamic Validation --- -In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular +In many cases, you want to change the validation rules depending on the state of the form or other conditions. The most popular example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not. We support this through our `onDynamic` validation function. diff --git a/docs/framework/react/guides/form-composition.md b/docs/framework/react/guides/form-composition.md index f30102237..1951b6420 100644 --- a/docs/framework/react/guides/form-composition.md +++ b/docs/framework/react/guides/form-composition.md @@ -11,7 +11,7 @@ As a result, while `form.Field` enables the most powerful and flexible usage of The most powerful way to compose forms is to create custom form hooks. This allows you to create a form hook that is tailored to your application's needs, including pre-bound custom UI components and more. -At it's most basic, `createFormHook` is a function that takes a `fieldContext` and `formContext` and returns a `useAppForm` hook. +At its most basic, `createFormHook` is a function that takes a `fieldContext` and `formContext` and returns a `useAppForm` hook. > This un-customized `useAppForm` hook is identical to `useForm`, but that will quickly change as we add more options to `createFormHook`. diff --git a/docs/framework/react/guides/linked-fields.md b/docs/framework/react/guides/linked-fields.md index c6065afe8..c6723b989 100644 --- a/docs/framework/react/guides/linked-fields.md +++ b/docs/framework/react/guides/linked-fields.md @@ -5,7 +5,7 @@ title: Link Two Form Fields Together You may find yourself needing to link two fields together; when one is validated as another field's value has changed. One such usage is when you have both a `password` and `confirm_password` field, -where you want to `confirm_password` to error out when `password`'s value does not match; +where you want `confirm_password` to error out when `password`'s value does not match; regardless of which field triggered the value change. Imagine the following userflow: diff --git a/docs/framework/react/guides/listeners.md b/docs/framework/react/guides/listeners.md index d57cd8c87..801be7fd0 100644 --- a/docs/framework/react/guides/listeners.md +++ b/docs/framework/react/guides/listeners.md @@ -94,7 +94,7 @@ We enable an easy method for debouncing your listeners by adding a `onChangeDebo At a higher level, listeners are also available at the form level, allowing you access to the `onMount` and `onSubmit` events, and having `onChange` and `onBlur` propagated to all the form's children. Form-level listeners can also be debounced in the same way as previously discussed. -`onMount` and `onSubmit` listeners have to following props: +`onMount` and `onSubmit` listeners have the following props: - `formApi` diff --git a/docs/framework/react/guides/reactivity.md b/docs/framework/react/guides/reactivity.md index 479facf44..537cb78f7 100644 --- a/docs/framework/react/guides/reactivity.md +++ b/docs/framework/react/guides/reactivity.md @@ -3,7 +3,7 @@ id: reactivity title: Reactivity --- -Tanstack Form doesn't cause re-renders when interacting with the form. So you might find yourself trying to use a form or field state value without success. +TanStack Form doesn't cause re-renders when interacting with the form. So you might find yourself trying to use a form or field state value without success. If you would like to access reactive values, you will need to subscribe to them using one of two methods: `useStore` or the `form.Subscribe` component. diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md index a48cb4188..8e2acb7a9 100644 --- a/docs/framework/react/guides/ssr.md +++ b/docs/framework/react/guides/ssr.md @@ -256,7 +256,7 @@ Finally, we'll use `someAction` in our client-side form component. import { useActionState } from 'react' import { - initialFormState + initialFormState, mergeForm, useForm, useStore, @@ -412,7 +412,7 @@ Finally, the `action` will be called when the form submits. import { Form, mergeForm, - useActionData + useActionData, useForm, useStore, useTransform, diff --git a/docs/framework/react/guides/submission-handling.md b/docs/framework/react/guides/submission-handling.md index a7fe65ca7..4d4026707 100644 --- a/docs/framework/react/guides/submission-handling.md +++ b/docs/framework/react/guides/submission-handling.md @@ -6,7 +6,7 @@ title: Submission handling ## Passing additional data to submission handling You may have multiple types of submission behaviour, for example, going back to another page or staying on the form. -You can accomplish this by specifying the `onSubmitMeta` property. This meta data will be passed to the `onSubmit` function. +You can accomplish this by specifying the `onSubmitMeta` property. This metadata will be passed to the `onSubmit` function. > Note: if `form.handleSubmit()` is called without metadata, it will use the provided default. @@ -64,7 +64,7 @@ function App() { ## Transforming data with Standard Schemas -While Tanstack Form provides [Standard Schema support](./validation.md) for validation, it does not preserve the Schema's output data. +While TanStack Form provides [Standard Schema support](./validation.md) for validation, it does not preserve the Schema's output data. The value passed to the `onSubmit` function will always be the input data. To receive the output data of a Standard Schema, parse it in the `onSubmit` function: @@ -73,7 +73,7 @@ const schema = z.object({ age: z.string().transform((age) => Number(age)), }) -// Tanstack Form uses the input type of Standard Schemas +// TanStack Form uses the input type of Standard Schemas const defaultValues: z.input = { age: '13', } diff --git a/docs/framework/react/guides/validation.md b/docs/framework/react/guides/validation.md index 9ae0f061a..db36772e1 100644 --- a/docs/framework/react/guides/validation.md +++ b/docs/framework/react/guides/validation.md @@ -11,7 +11,7 @@ At the core of TanStack Form's functionalities is the concept of validation. Tan ## When is validation performed? -It's up to you! The `` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field.state.meta.errors`. +It's up to you! The `` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as a string and it will be available in `field.state.meta.errors`. Here is an example: @@ -104,7 +104,7 @@ So you can control when the validation is done by implementing the desired callb ``` -In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below. +In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc.). More info about displaying errors below. ## Displaying Errors @@ -152,7 +152,7 @@ Or use the `errorMap` property to access the specific error you're looking for: ``` -It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that: +It's worth mentioning that our `errors` array and the `errorMap` match the types returned by the validators. This means that: ```tsx Loading..

}> + Loading...

}> <> ) diff --git a/docs/framework/solid/guides/devtools.md b/docs/framework/solid/guides/devtools.md index a238f5ec2..5017fea31 100644 --- a/docs/framework/solid/guides/devtools.md +++ b/docs/framework/solid/guides/devtools.md @@ -3,11 +3,11 @@ id: devtools title: Devtools --- -TanStack Form comes with a ready to go suit of devtools. +TanStack Form comes with a ready to go suite of devtools. ## Setup -Install the [TanStack Devtools](https://tanstack.com/devtools/latest/docs/quick-start) library and the [TanStack Form plugin](http://npmjs.com/package/@tanstack/solid-form-devtools), from the framework adapter that your working in (in this case `@tanstack/solid-devtools`, and `@tanstack/solid-form-devtools`). +Install the [TanStack Devtools](https://tanstack.com/devtools/latest/docs/quick-start) library and the [TanStack Form plugin](http://npmjs.com/package/@tanstack/solid-form-devtools), from the framework adapter that you're working in (in this case `@tanstack/solid-devtools`, and `@tanstack/solid-form-devtools`). ```bash npm i @tanstack/solid-devtools diff --git a/docs/framework/solid/guides/dynamic-validation.md b/docs/framework/solid/guides/dynamic-validation.md index 14d608818..48f8779f0 100644 --- a/docs/framework/solid/guides/dynamic-validation.md +++ b/docs/framework/solid/guides/dynamic-validation.md @@ -3,7 +3,7 @@ id: dynamic-validation title: Dynamic Validation --- -In many cases, you want to change the validation rules based depending on the state of the form or other conditions. The most popular +In many cases, you want to change the validation rules depending on the state of the form or other conditions. The most popular example of this is when you want to validate a field differently based on whether the user has submitted the form for the first time or not. We support this through our `onDynamic` validation function. diff --git a/docs/framework/solid/guides/form-composition.md b/docs/framework/solid/guides/form-composition.md index 053aa0831..b7816e083 100644 --- a/docs/framework/solid/guides/form-composition.md +++ b/docs/framework/solid/guides/form-composition.md @@ -11,7 +11,7 @@ As a result, while `form.Field` enables the most powerful and flexible usage of The most powerful way to compose forms is to create custom form hooks. This allows you to create a form hook that is tailored to your application's needs, including pre-bound custom UI components and more. -At it's most basic, `createFormHook` is a function that takes a `fieldContext` and `formContext` and returns a `useAppForm` hook. +At its most basic, `createFormHook` is a function that takes a `fieldContext` and `formContext` and returns a `useAppForm` hook. > This un-customized `useAppForm` hook is identical to `useForm`, but that will quickly change as we add more options to `createFormHook`. diff --git a/docs/framework/solid/guides/linked-fields.md b/docs/framework/solid/guides/linked-fields.md index 489a05436..6670d6fc7 100644 --- a/docs/framework/solid/guides/linked-fields.md +++ b/docs/framework/solid/guides/linked-fields.md @@ -5,7 +5,7 @@ title: Link Two Form Fields Together You may find yourself needing to link two fields together; when one is validated as another field's value has changed. One such usage is when you have both a `password` and `confirm_password` field, -where you want to `confirm_password` to error out when `password`'s value does not match; +where you want `confirm_password` to error out when `password`'s value does not match; regardless of which field triggered the value change. Imagine the following userflow: diff --git a/docs/framework/solid/guides/submission-handling.md b/docs/framework/solid/guides/submission-handling.md index 0ff523e1c..ebe0dc87f 100644 --- a/docs/framework/solid/guides/submission-handling.md +++ b/docs/framework/solid/guides/submission-handling.md @@ -6,7 +6,7 @@ title: Submission handling ## Passing additional data to submission handling You may have multiple types of submission behaviour, for example, going back to another page or staying on the form. -You can accomplish this by specifying the `onSubmitMeta` property. This meta data will be passed to the `onSubmit` function. +You can accomplish this by specifying the `onSubmitMeta` property. This metadata will be passed to the `onSubmit` function. > Note: if `form.handleSubmit()` is called without metadata, it will use the provided default. @@ -64,7 +64,7 @@ export default function App() { ## Transforming data with Standard Schemas -While Tanstack Form provides [Standard Schema support](./validation.md) for validation, it does not preserve the Schema's output data. +While TanStack Form provides [Standard Schema support](./validation.md) for validation, it does not preserve the Schema's output data. The value passed to the `onSubmit` function will always be the input data. To receive the output data of a Standard Schema, parse it in the `onSubmit` function: @@ -78,7 +78,7 @@ const schema = z.object({ age: z.string().transform((age) => Number(age)), }) -// Tanstack Form uses the input type of Standard Schemas +// TanStack Form uses the input type of Standard Schemas const defaultValues: z.input = { age: '13', } diff --git a/docs/framework/solid/guides/validation.md b/docs/framework/solid/guides/validation.md index 31af7cbc0..8d946f3b6 100644 --- a/docs/framework/solid/guides/validation.md +++ b/docs/framework/solid/guides/validation.md @@ -11,7 +11,7 @@ At the core of TanStack Form's functionalities is the concept of validation. Tan ## When is validation performed? -It's up to you! The `` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field().state.meta.errors`. +It's up to you! The `` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as a string and it will be available in `field().state.meta.errors`. Here is an example: @@ -104,7 +104,7 @@ So you can control when the validation is done by implementing the desired callb ``` -In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field().state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field().state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below. +In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field().state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field().state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc.). More info about displaying errors below. ## Displaying Errors @@ -152,7 +152,7 @@ Or use the `errorMap` property to access the specific error you're looking for: ``` -It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that: +It's worth mentioning that our `errors` array and the `errorMap` match the types returned by the validators. This means that: ```tsx ` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as string and it will be available in `field.state.meta.errors`. +It's up to you! The `` component accepts some callbacks as props such as `onChange` or `onBlur`. Those callbacks are passed the current value of the field, as well as the fieldAPI object, so that you can perform the validation. If you find a validation error, simply return the error message as a string and it will be available in `field.state.meta.errors`. Here is an example: @@ -94,7 +94,7 @@ So you can control when the validation is done by implementing the desired callb ``` -In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below. +In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc.). More info about displaying errors below. ## Displaying Errors @@ -136,7 +136,7 @@ Or use the `errorMap` property to access the specific error you're looking for: ``` -It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that: +It's worth mentioning that our `errors` array and the `errorMap` match the types returned by the validators. This means that: ```svelte ``` -In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc...). More info about displaying errors below. +In the example above, we are validating different things on the same field at different times (at each keystroke and when blurring the field). Since `field.state.meta.errors` is an array, all the relevant errors at a given time are displayed. You can also use `field.state.meta.errorMap` to get errors based on _when_ the validation was done (onChange, onBlur etc.). More info about displaying errors below. ## Displaying Errors @@ -163,7 +163,7 @@ Or use the `errorMap` property to access the specific error you're looking for: ``` -It's worth mentioning that our `errors` array and the `errorMap` matches the types returned by the validators. This means that: +It's worth mentioning that our `errors` array and the `errorMap` match the types returned by the validators. This means that: ```vue Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourselves. +> Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from `node_modules` yourself. diff --git a/docs/overview.md b/docs/overview.md index 7274886f6..22e42f1b6 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -65,7 +65,7 @@ export default function App() { }} >
- {/* A type-safe field component*/} + {/* A type-safe field component */} ) ## You talked me into it, so what now? -- Learn TanStack Form at your own pace with our thorough [Walkthrough Guide](./installation) and [API Reference](./reference/classes/FormApi) +- Learn TanStack Form at your own pace with our thorough [Walkthrough Guide](./installation) and [API Reference](./reference/classes/FormApi). diff --git a/docs/philosophy.md b/docs/philosophy.md index 3410e9d0e..437118d46 100644 --- a/docs/philosophy.md +++ b/docs/philosophy.md @@ -27,7 +27,7 @@ As a result, TanStack Form supports multiple methods for validation: ## Controlled is Cool -In a world where controlled vs uncontrolled inputs are a hot topic, TanStack Form is firmly in the controlled camp. +In a world where controlled vs. uncontrolled inputs are a hot topic, TanStack Form is firmly in the controlled camp. This comes with a number of advantages: diff --git a/docs/typescript.md b/docs/typescript.md index 942077113..cfb22cdf8 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -3,7 +3,7 @@ id: typescript title: TypeScript --- -TanStack Form is written 100% in **TypeScript** with the highest quality generics, constraints and interfaces to make sure the library and your projects are as type-safe as possible! +TanStack Form is written 100% in **TypeScript** with the highest quality generics, constraints, and interfaces to make sure the library and your projects are as type-safe as possible! Things to keep in mind: