{{ formErrorMap().onDynamic?.firstName }}
`, -}) -export class AppComponent { - form = injectForm({ - // ... - validationLogic: revalidateLogic(), - validators: { - onDynamic: ({ value }) => { - if (!value.firstName) { - return { firstName: 'A first name is required' } - } - return undefined - }, - }, - }) - - formErrorMap = injectStore(this.form, (state) => state.errorMap) -} -``` - -## Usage with Other Validation Logic - -You can use `onDynamic` validation alongside other validation logic, such as `onChange` or `onBlur`. - -```angular-ts -import { Component } from '@angular/core' -import { - TanStackField, - injectForm, - injectStore, - revalidateLogic, -} from '@tanstack/angular-form' - -@Component({ - selector: 'app-root', - standalone: true, - imports: [TanStackField], - template: ` -{{ formErrorMap().onChange?.firstName }}
-{{ formErrorMap().onDynamic?.lastName }}
-Validating...
- } -Validating...
- } -Validating...
- } - `, -}) -export class AppTextField { - label = input.required${this.#form.api.state.errorMap.onDynamic?.firstName}
` - } -} -``` - -## Usage with Other Validation Logic - -You can use `onDynamic` validation alongside other validation logic, such as `onChange` or `onBlur`. - -```ts -import { LitElement, html } from 'lit' -import { customElement } from 'lit/decorators.js' -import { TanStackFormController, revalidateLogic } from '@tanstack/lit-form' - -@customElement('my-form') -export class MyForm extends LitElement { - #form = new TanStackFormController(this, { - defaultValues: { - firstName: '', - lastName: '', - }, - validationLogic: revalidateLogic(), - validators: { - onChange: ({ value }) => { - if (!value.firstName) { - return { firstName: 'A first name is required' } - } - return undefined - }, - onDynamic: ({ value }) => { - if (!value.lastName) { - return { lastName: 'A last name is required' } - } - return undefined - }, - }, - }) - - render() { - return html` -${this.#form.api.state.errorMap.onChange?.firstName}
-${this.#form.api.state.errorMap.onDynamic?.lastName}
-${this.title}
- ${this.form.field( - { name: 'firstName' }, - (field) => html` -Please enter your first name
- ${this.#form.field( - { - name: `firstName`, - validators: { - onChange: ({ value }) => - value.length < 3 ? 'Not long enough' : undefined, - }, - }, - (field: FieldApiLoading...
- - return ( - // ... - ) -} -``` - -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/preact/guides/basic-concepts.md b/docs/framework/preact/guides/basic-concepts.md deleted file mode 100644 index 1b35934d25..0000000000 --- a/docs/framework/preact/guides/basic-concepts.md +++ /dev/null @@ -1,404 +0,0 @@ ---- -id: basic-concepts -title: Basic Concepts and Terminology ---- - -This page introduces the basic concepts and terminology used in the `@tanstack/preact-form` library. Familiarizing yourself with these concepts will help you better understand and work with the library. - -## Form Options - -You can customize your form by creating configuration options with the `formOptions` function. These options can be shared between multiple forms. - -Example: - -```tsx -interface User { - firstName: string - lastName: string - hobbies: Array