Loading..
; + + return null; +} + +``` + +This will show a loading spinner until the data is fetched, and then it will render the form with the fetched data as the initial values. diff --git a/docs/framework/solid/guides/basic-concepts.md b/docs/framework/solid/guides/basic-concepts.md new file mode 100644 index 000000000..eb3cf2a13 --- /dev/null +++ b/docs/framework/solid/guides/basic-concepts.md @@ -0,0 +1,288 @@ +--- +id: basic-concepts +title: Basic Concepts and Terminology +--- + +This page introduces the basic concepts and terminology used in the `@tanstack/solid-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library. + +## Form Options + +You can create options for your form so that it can be shared between multiple forms by using the `formOptions` function. + +Example: + +```tsx +const formOpts = formOptions{field().state.meta.errors[0]}
+ + )} +/> +``` + +## Validation Adapters + +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/). + +Example: + +```tsx +import { zodValidator } from '@tanstack/zod-form-adapter' +import { z } from 'zod' + +// ... +{field().state.meta.errors[0]}
+ + )} +/> +``` + +## Reactivity + +`@tanstack/solid-form` offers various ways to subscribe to form and field state changes, most notably the `form.useStore` hook and the `form.Subscribe` component. These methods allow you to optimize your form's rendering performance by only updating components when necessary. + +Example: + +```tsx +const firstName = form.useStore((state) => state.values.firstName) +//... +