# Formisch > The lightweight, schema-first and fully type-safe form library for Angular, Preact, Qwik, React, Solid, Svelte and Vue. ## Functions ### injectForm Creates a reactive form store from a form configuration. ```ts const form = injectForm(config); ``` #### Generics - `TSchema` `extends FormSchema` #### Parameters - `config` `FormConfig` ##### Explanation With `injectForm` you create the store of your form based on a Valibot schema. The store manages the form state and exposes it as Angular signals, so you can call properties like `form.isValid()` directly in your template — including in `OnPush` and zoneless components. Like Angular's own `inject`, `injectForm` must be called in an injection context, which means in a field initializer or the constructor of your component. Pass the returned store to the [`[formischForm]`](/angular/api/formischForm.md) directive to connect it to your `
` element. #### Returns - `form` `FormStore` #### Examples The following examples show how `injectForm` can be used. ##### Basic form ```ts import { Component } from '@angular/core'; import { FormischForm, injectForm } from '@formisch/angular'; import * as v from 'valibot'; const LoginSchema = v.object({ email: v.pipe(v.string(), v.email()), password: v.pipe(v.string(), v.minLength(8)), }); @Component({ selector: 'app-login', imports: [FormischForm], template: ` `, }) export class LoginComponent { readonly loginForm = injectForm({ schema: LoginSchema }); readonly handleSubmit = (output: v.InferOutput) => { console.log(output); }; } ``` ##### Initial input ```ts readonly profileForm = injectForm({ schema: ProfileSchema, initialInput: { name: 'Jane Doe', email: 'jane@example.com', }, }); ``` ##### Validation timing ```ts readonly signUpForm = injectForm({ schema: SignUpSchema, validate: 'blur', revalidate: 'input', }); ``` #### Related The following APIs can be combined with `injectForm`. ##### Functions [`injectField`](/angular/api/injectField.md), [`injectFieldArray`](/angular/api/injectFieldArray.md) ##### Directives [`formischForm`](/angular/api/formischForm.md), [`formischField`](/angular/api/formischField.md), [`formischFieldArray`](/angular/api/formischFieldArray.md) ##### Methods [`focus`](/methods/api/focus.md), [`getDeepErrors`](/methods/api/getDeepErrors.md), [`getInput`](/methods/api/getInput.md), [`handleSubmit`](/methods/api/handleSubmit.md), [`reset`](/methods/api/reset.md), [`setInput`](/methods/api/setInput.md), [`submit`](/methods/api/submit.md), [`validate`](/methods/api/validate.md) ### injectField Creates a reactive field store for a specific field within a form store. ```ts const field = injectField(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Parameters - `form` `SignalOrValue>` - `config` `InjectFieldConfig` ##### Explanation With `injectField` you create a field store for a specific field path within your form. The field store exposes the field's input value, validation errors and state as Angular signals, provides a `setInput` method to update the value programmatically, and carries the element-binding contract that the [`[formischControl]`](/angular/api/formischControl.md) directive consumes. Like Angular's own `inject`, `injectField` must be called in an injection context. Both the form and the path may be passed as a signal, so the field store follows an input signal of your component or a path that changes over time. Use `injectField` when you build a component for a single field. To create fields directly in a template, use the [`*formischField`](/angular/api/formischField.md) directive instead, which is a thin wrapper around this function. #### Returns - `field` `FieldStore` #### Examples The following examples show how `injectField` can be used. ##### Field component ```ts import { Component, input } from '@angular/core'; import { FormischControl, type FormStore, injectField, } from '@formisch/angular'; import * as v from 'valibot'; const EmailSchema = v.object({ email: v.pipe(v.string(), v.email()) }); @Component({ selector: 'app-email-input', imports: [FormischControl], template: ` @if (field.errors(); as errors) {
{{ errors[0] }}
} `, }) export class EmailInputComponent { readonly of = input.required>(); protected readonly field = injectField(this.of, { path: ['email'] }); } ``` > Type the form input with a concrete schema, as above. A component that is generic over the schema cannot resolve the path type, because `ValidPath` is computed from the inferred input of the schema. To build a field component that works with any schema, take the field store as an input instead and stay generic over `TSchema` and `TFieldPath` — see the [TypeScript](/angular/guides/typescript.md) guide. ##### Set the input programmatically ```ts protected readonly field = injectField(this.form, { path: ['country'] }); selectCountry(country: string): void { this.field.setInput(country); } ``` #### Related The following APIs can be combined with `injectField`. ##### Functions [`injectForm`](/angular/api/injectForm.md), [`injectFieldArray`](/angular/api/injectFieldArray.md) ##### Directives [`formischControl`](/angular/api/formischControl.md), [`formischField`](/angular/api/formischField.md), [`formischForm`](/angular/api/formischForm.md) ##### Methods [`focus`](/methods/api/focus.md), [`getErrors`](/methods/api/getErrors.md), [`getInput`](/methods/api/getInput.md), [`setErrors`](/methods/api/setErrors.md), [`setInput`](/methods/api/setInput.md), [`validate`](/methods/api/validate.md) ### injectFieldArray Creates a reactive field array store for a specific array field within a form store. ```ts const fieldArray = injectFieldArray(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Parameters - `form` `SignalOrValue>` - `config` `InjectFieldArrayConfig` ##### Explanation With `injectFieldArray` you create a field array store for a specific array path within your form. The store exposes the item identifiers of the array as a signal, together with the errors and state of the array itself. Use the item identifiers as the `track` expression of your `@for` block. They are stable across reorders, which lets Angular move the existing DOM instead of recreating it, and keeps each field's state attached to the right item. Like Angular's own `inject`, `injectFieldArray` must be called in an injection context. To create a field array directly in a template, use the [`*formischFieldArray`](/angular/api/formischFieldArray.md) directive instead, which is a thin wrapper around this function. #### Returns - `fieldArray` `FieldArrayStore` #### Examples The following examples show how `injectFieldArray` can be used. ##### Field array component ```ts import { Component, input } from '@angular/core'; import { type FormStore, injectFieldArray, remove } from '@formisch/angular'; import * as v from 'valibot'; const TodoListSchema = v.object({ todos: v.array(v.object({ label: v.pipe(v.string(), v.nonEmpty()) })), }); @Component({ selector: 'app-todo-list', template: ` @for (item of fieldArray.items(); track item; let index = $index) { } @if (fieldArray.errors(); as errors) {
{{ errors[0] }}
} `, }) export class TodoListComponent { readonly of = input.required>(); protected readonly fieldArray = injectFieldArray(this.of, { path: ['todos'], }); handleRemove(index: number): void { remove(this.of(), { path: ['todos'], at: index }); } } ``` #### Related The following APIs can be combined with `injectFieldArray`. ##### Functions [`injectForm`](/angular/api/injectForm.md), [`injectField`](/angular/api/injectField.md) ##### Directives [`formischFieldArray`](/angular/api/formischFieldArray.md), [`formischField`](/angular/api/formischField.md), [`formischForm`](/angular/api/formischForm.md) ##### Methods [`insert`](/methods/api/insert.md), [`move`](/methods/api/move.md), [`remove`](/methods/api/remove.md), [`replace`](/methods/api/replace.md), [`swap`](/methods/api/swap.md), [`validate`](/methods/api/validate.md) ## Directives ### formischForm Directive that turns a native `
` element into a Formisch-managed form. It is exported as the `FormischForm` class. ```angular-html
``` #### Generics - `TSchema` `extends FormSchema` #### Inputs - `formischForm` `FormStore` - `formischSubmit` `SubmitEventHandler` ##### Explanation The `[formischForm]` directive attaches a form store to a native `
` element. When the form is submitted, it validates the input against your schema, focuses the first invalid field, and calls your submit handler only if validation succeeds. It also adds `novalidate` to the element to disable the browser's own validation, since Formisch handles validation internally, and registers the element so that the [`submit`](/methods/api/submit.md) method can reach it. The `[formischSubmit]` input receives your handler as a function reference instead of calling it in the template. That way Formisch can await the promise it returns and keep `form.isSubmitting()` up to date, and register the pending submission with Angular's `PendingTasks` so server-side rendering and tests wait for it. > Declare your handler as an arrow function property. A regular class method would lose its `this` when it is passed as a reference. To import the directive, add the `FormischForm` class to the `imports` array of your component. #### Related The following APIs can be combined with `formischForm`. ##### Functions [`injectForm`](/angular/api/injectForm.md), [`injectField`](/angular/api/injectField.md), [`injectFieldArray`](/angular/api/injectFieldArray.md) ##### Directives [`formischField`](/angular/api/formischField.md), [`formischFieldArray`](/angular/api/formischFieldArray.md), [`formischControl`](/angular/api/formischControl.md) ##### Methods [`focus`](/methods/api/focus.md), [`getDeepErrors`](/methods/api/getDeepErrors.md), [`handleSubmit`](/methods/api/handleSubmit.md), [`reset`](/methods/api/reset.md), [`submit`](/methods/api/submit.md), [`validate`](/methods/api/validate.md) ### formischField Structural directive that creates a typed field store for a path and exposes it as the implicit context of the template. It is exported as the `FormischField` class. ```angular-html ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Inputs - `formischField` `ValidPath, TFieldPath>` - `formischFieldOf` `FormStore` #### Context - `$implicit` `FieldStore` ##### Explanation The `*formischField` directive is a thin wrapper around [`injectField`](/angular/api/injectField.md) that lets you create a field directly in your template. The path is the expression before the `of` keyword, and the form store follows it. Passing the form explicitly this way is what allows the context guard to infer the type of the field's value. The field store is exposed as the implicit context, so `let field` binds it. Bind it to a native element with the [`[formischControl]`](/angular/api/formischControl.md) directive. When one field spans multiple elements — a label, the input and an error message — use an `` as the host of the directive. Because the directive declares an `ngTemplateContextGuard`, an invalid path is a compile error in your template as soon as `strictTemplates` is enabled in the `angularCompilerOptions` of your `tsconfig.json`. To import the directive, add the `FormischField` class to the `imports` array of your component. #### Related The following APIs can be combined with `formischField`. ##### Functions [`injectField`](/angular/api/injectField.md), [`injectForm`](/angular/api/injectForm.md) ##### Directives [`formischControl`](/angular/api/formischControl.md), [`formischForm`](/angular/api/formischForm.md), [`formischFieldArray`](/angular/api/formischFieldArray.md) ##### Methods [`focus`](/methods/api/focus.md), [`getErrors`](/methods/api/getErrors.md), [`getInput`](/methods/api/getInput.md), [`setErrors`](/methods/api/setErrors.md), [`setInput`](/methods/api/setInput.md), [`validate`](/methods/api/validate.md) ### formischFieldArray Structural directive that creates a typed field array store for a path and exposes it as the implicit context of the template. It is exported as the `FormischFieldArray` class. ```angular-html ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Inputs - `formischFieldArray` `ValidArrayPath, TFieldArrayPath>` - `formischFieldArrayOf` `FormStore` #### Context - `$implicit` `FieldArrayStore` ##### Explanation The `*formischFieldArray` directive is a thin wrapper around [`injectFieldArray`](/angular/api/injectFieldArray.md) that lets you create a field array directly in your template. The path is the expression before the `of` keyword, and the form store follows it, which allows the context guard to infer the type of the array. Render the items with an `@for` block over `fieldArray.items()` and use the item identifier as the `track` expression. The identifiers are stable across reorders, so Angular moves the existing DOM instead of recreating it. Combine the index of the `@for` block with [`*formischField`](/angular/api/formischField.md) to address the fields of an item, and use the [`insert`](/methods/api/insert.md), [`move`](/methods/api/move.md), [`remove`](/methods/api/remove.md), [`replace`](/methods/api/replace.md) and [`swap`](/methods/api/swap.md) methods to change the array. To import the directive, add the `FormischFieldArray` class to the `imports` array of your component. #### Related The following APIs can be combined with `formischFieldArray`. ##### Functions [`injectFieldArray`](/angular/api/injectFieldArray.md), [`injectForm`](/angular/api/injectForm.md) ##### Directives [`formischField`](/angular/api/formischField.md), [`formischForm`](/angular/api/formischForm.md), [`formischControl`](/angular/api/formischControl.md) ##### Methods [`insert`](/methods/api/insert.md), [`move`](/methods/api/move.md), [`remove`](/methods/api/remove.md), [`replace`](/methods/api/replace.md), [`swap`](/methods/api/swap.md), [`validate`](/methods/api/validate.md) ### formischControl Directive that binds a native form control to a field of your form. It is exported as the `FormischControl` class. ```angular-html ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Inputs - `formischControl` `FieldStore` ##### Explanation The `[formischControl]` directive connects a field store to a native form control. It writes the current input of the field into the element, keeps the `name` and `aria-invalid` attributes in sync, wires the `input`, `change`, `focus` and `blur` events that drive validation, and registers the element so that focusing the first invalid field on submit and the [`focus`](/methods/api/focus.md) method work. Because the directive owns the value of the element, you must not bind `[value]` or `[checked]` to hold the state of the field yourself. Radio and checkbox groups are an exception: bind every element of the group to the same field and give each its own `value` attribute, which identifies the option rather than the state of the field. The directive knows the quirks of each element type. It sets `value` on text inputs, `checked` on checkboxes and radios, and the selected state of the options of a `` ignores a value for which no matching option exists yet, the directive also observes the options and re-applies the input when they render later. A file input can only be cleared, because browsers do not allow a file selection to be set programmatically. Both type arguments are inferred from the field store you pass. Keep components that take a field store as an input generic over `TSchema` and `TFieldPath` — the store is invariant, so a component that widens it to the default `FieldStore` cannot accept a concrete field. To import the directive, add the `FormischControl` class to the `imports` array of your component. #### Related The following APIs can be combined with `formischControl`. ##### Functions [`injectField`](/angular/api/injectField.md), [`injectForm`](/angular/api/injectForm.md) ##### Directives [`formischField`](/angular/api/formischField.md), [`formischFieldArray`](/angular/api/formischFieldArray.md), [`formischForm`](/angular/api/formischForm.md) ##### Methods [`focus`](/methods/api/focus.md), [`getInput`](/methods/api/getInput.md), [`reset`](/methods/api/reset.md), [`setInput`](/methods/api/setInput.md) ## Methods ### focus Focuses the first input element of a field. This is useful for programmatically setting focus to a specific field, such as after validation errors or user interactions. ```ts focus(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Parameters - `form` `BaseFormStore` - `config` `FocusFieldConfig` ##### Explanation The `form` parameter is the form store containing the field to focus. The `config` parameter specifies which field to focus using the `path` property, and can optionally include additional focus options. #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`validate`](/methods/api/validate.md), [`setErrors`](/methods/api/setErrors.md) ### getDeepErrorEntries Retrieves the errors of a specific field or the entire form as a list of entries, each pairing the path to a field with its error messages. This is useful for building custom error summaries that link each message back to its field. ```ts const entries = getDeepErrorEntries(form); const entries = getDeepErrorEntries(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `GetFormDeepErrorEntriesConfig | GetFieldDeepErrorEntriesConfig | undefined` ##### Explanation The `form` parameter is the form store to retrieve error entries from. The optional `config` parameter scopes the collection to a specific field's subtree via a `path` (when omitted, the entire form is walked). Each returned entry contains the `path` to a field and its non-empty list of `errors`. #### Returns - `result` `DeepErrorEntry[]` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`getErrors`](/methods/api/getErrors.md), [`getDeepErrors`](/methods/api/getDeepErrors.md), [`validate`](/methods/api/validate.md) ### getDeepErrors Retrieves all error messages of a specific field or the entire form by walking through the field store and all its descendants. This is useful for displaying a summary of all validation errors within a section or the whole form. ```ts const errors = getDeepErrors(form); const errors = getDeepErrors(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `GetFormDeepErrorsConfig | GetFieldDeepErrorsConfig | undefined` ##### Explanation The `form` parameter is the form store to retrieve errors from. The optional `config` parameter scopes the collection to a specific field's subtree via a `path` (when omitted, the entire form is walked). The function walks through the field store and all its descendants to collect every validation error message. #### Returns - `result` `[string, ...string[]] | null` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`getErrors`](/methods/api/getErrors.md), [`getDeepErrorEntries`](/methods/api/getDeepErrorEntries.md), [`validate`](/methods/api/validate.md), [`setErrors`](/methods/api/setErrors.md) ### getDirtyInput Retrieves only the dirty input values of a specific field or the entire form. Object keys whose subtree contains no dirty descendant are omitted; arrays are treated as atomic and returned in full whenever any descendant is dirty. Returns `undefined` if no field in the inspected subtree is dirty. ```ts const input = getDirtyInput(form); const input = getDirtyInput(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `GetFormDirtyInputConfig | GetFieldDirtyInputConfig | undefined` ##### Explanation The `form` parameter is the form store to retrieve dirty input from. The optional `config` parameter scopes the result to a specific field path - if omitted, returns dirty input from the entire form. The returned value is a partial of the inspected input shape containing only the fields whose `isDirty` flag is set, which is useful for submitting only the values that changed since the start input. Arrays are treated as atomic — when any descendant of an array is dirty, the full current array is returned. Internally, the function walks the form's field tree and asks `getFieldBool` whether each branch contains a dirty descendant. Because that check is itself recursive, the cost is effectively linear in field count for typical balanced forms (shallow and wide) and degrades toward `O(N²)` for deeply nested trees. Call this method from submit or blur handlers rather than from tight reactive loops on large forms. #### Returns - `result` `DeepPartial> | undefined` #### Related ##### Methods [`getDirtyPaths`](/methods/api/getDirtyPaths.md), [`getInput`](/methods/api/getInput.md), [`pickDirty`](/methods/api/pickDirty.md), [`reset`](/methods/api/reset.md) ### getDirtyPaths Returns a list of paths to dirty fields in the form. Object branches are recursed into; arrays are treated as atomic — when any descendant of an array is dirty, only the array's own path is returned. ```ts const paths = getDirtyPaths(form); const paths = getDirtyPaths(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `GetFormDirtyPathsConfig | GetFieldDirtyPathsConfig | undefined` ##### Explanation The `form` parameter is the form store to inspect. The optional `config` parameter scopes the search to a single subtree via its `path` property. Object branches are recursed into and clean keys are omitted; arrays are atomic, so when any descendant of an array is dirty, the result includes the array's own path rather than the paths of its individual items. Returns an empty array if the inspected subtree contains no dirty fields. When `path` targets a dirty array or value field, the result contains that path. Internally, the function walks the form's field tree and asks `getFieldBool` whether each branch contains a dirty descendant. Because that check is itself recursive, the cost is effectively linear in field count for typical balanced forms (shallow and wide) and degrades toward `O(N²)` for deeply nested trees. Call this method from submit or blur handlers rather than from tight reactive loops on large forms. #### Returns - `result` `RequiredPath[]` #### Related ##### Methods [`getDirtyInput`](/methods/api/getDirtyInput.md), [`getInput`](/methods/api/getInput.md), [`pickDirty`](/methods/api/pickDirty.md) ### getErrors Retrieves error messages from the form. When called without a config, returns form-level errors. When called with a path, returns errors for that specific field. ```ts const errors = getErrors(form); const errors = getErrors(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `GetFormErrorsConfig | GetFieldErrorsConfig | undefined` ##### Explanation The `form` parameter is the form store to retrieve errors from. The optional `config` parameter specifies which errors to retrieve - either form-level errors (when omitted) or field-specific errors (when a `path` is provided). #### Returns - `result` `[string, ...string[]] | null` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`getDeepErrors`](/methods/api/getDeepErrors.md), [`setErrors`](/methods/api/setErrors.md), [`validate`](/methods/api/validate.md) ### getInput Retrieves the current input value of a specific field or the entire form. Returns a partial object as not all fields may have been set. ```ts const input = getInput(form); const input = getInput(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `GetFormInputConfig | GetFieldInputConfig | undefined` ##### Explanation The `form` parameter is the form store to retrieve input from. The optional `config` parameter specifies which field to get input from - if omitted, returns input from the entire form. #### Returns - `result` `PartialValues>` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`setInput`](/methods/api/setInput.md), [`reset`](/methods/api/reset.md) ### handleSubmit Creates a submit event handler for the form that prevents default browser submission, validates the form input, and calls the provided handler if validation succeeds. This is designed to be used with the form's onsubmit event. ```ts const result = handleSubmit(form, handler); ``` #### Generics - `TSchema` `extends FormSchema` #### Parameters - `form` `BaseFormStore` - `handler` `SubmitHandler | SubmitEventHandler` ##### Explanation The `form` parameter is the form store to handle submission for. The `handler` parameter can be a `SubmitHandler` (no event) or a `SubmitEventHandler` (with event) that gets called with the validated form output if validation succeeds. #### Returns - `result` `(() => Promise) | ((event: SubmitEvent) => Promise)` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`validate`](/methods/api/validate.md), [`focus`](/methods/api/focus.md), [`submit`](/methods/api/submit.md) ### insert Inserts a new item into a field array at the specified index. All items at or after the insertion point are shifted up by one index. ```ts insert(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Parameters - `form` `BaseFormStore` - `config` `InsertConfig` ##### Explanation The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array, the index where to insert the new item, and optional initial input values for the new item. #### Related ##### Primitives [`useForm`](/react/api/useForm.md), [`useFieldArray`](/react/api/useFieldArray.md) ##### Methods [`move`](/methods/api/move.md), [`remove`](/methods/api/remove.md), [`replace`](/methods/api/replace.md), [`swap`](/methods/api/swap.md) ### isDirty Checks whether a specific field or the entire form is dirty by walking through the field store and all its descendants. A field is dirty when its input differs from its initial value. ```ts const dirty = isDirty(form); const dirty = isDirty(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `IsFormDirtyConfig | IsFieldDirtyConfig | undefined` ##### Explanation The `form` parameter is the form store to check for dirtiness. The optional `config` parameter scopes the check to a specific field's subtree via a `path` (when omitted, the entire form is checked). The function walks through the field store and all its descendants and returns `true` as soon as it finds a dirty field. #### Returns - `result` `boolean` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`getDirtyInput`](/methods/api/getDirtyInput.md), [`getDirtyPaths`](/methods/api/getDirtyPaths.md), [`pickDirty`](/methods/api/pickDirty.md), [`isTouched`](/methods/api/isTouched.md), [`isEdited`](/methods/api/isEdited.md), [`isValid`](/methods/api/isValid.md) ### isEdited Checks whether a specific field or the entire form is edited by walking through the field store and all its descendants. A field is edited once its value has been changed by the user. ```ts const edited = isEdited(form); const edited = isEdited(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `IsFormEditedConfig | IsFieldEditedConfig | undefined` ##### Explanation The `form` parameter is the form store to check for being edited. The optional `config` parameter scopes the check to a specific field's subtree via a `path` (when omitted, the entire form is checked). The function walks through the field store and all its descendants and returns `true` as soon as it finds an edited field. #### Returns - `result` `boolean` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`isDirty`](/methods/api/isDirty.md), [`isTouched`](/methods/api/isTouched.md), [`isValid`](/methods/api/isValid.md) ### isTouched Checks whether a specific field or the entire form is touched by walking through the field store and all its descendants. A field is touched once it has received and lost focus. ```ts const touched = isTouched(form); const touched = isTouched(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `IsFormTouchedConfig | IsFieldTouchedConfig | undefined` ##### Explanation The `form` parameter is the form store to check for being touched. The optional `config` parameter scopes the check to a specific field's subtree via a `path` (when omitted, the entire form is checked). The function walks through the field store and all its descendants and returns `true` as soon as it finds a touched field. #### Returns - `result` `boolean` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`isDirty`](/methods/api/isDirty.md), [`isEdited`](/methods/api/isEdited.md), [`isValid`](/methods/api/isValid.md), [`focus`](/methods/api/focus.md) ### isValid Checks whether a specific field or the entire form is valid by walking through the field store and all its descendants. A field is valid when neither it nor any of its descendants contains an error. ```ts const valid = isValid(form); const valid = isValid(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `IsFormValidConfig | IsFieldValidConfig | undefined` ##### Explanation The `form` parameter is the form store to check for validity. The optional `config` parameter scopes the check to a specific field's subtree via a `path` (when omitted, the entire form is checked). The function walks through the field store and all its descendants and returns `false` as soon as it finds an error. #### Returns - `result` `boolean` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`getErrors`](/methods/api/getErrors.md), [`getDeepErrors`](/methods/api/getDeepErrors.md), [`isDirty`](/methods/api/isDirty.md), [`isTouched`](/methods/api/isTouched.md), [`isEdited`](/methods/api/isEdited.md) ### move Moves an item within a field array from one index to another. All items between the old and new positions are shifted accordingly. ```ts move(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Parameters - `form` `BaseFormStore` - `config` `MoveConfig` ##### Explanation The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array and the indices to move the item from and to. #### Related ##### Primitives [`useForm`](/react/api/useForm.md), [`useFieldArray`](/react/api/useFieldArray.md) ##### Methods [`insert`](/methods/api/insert.md), [`remove`](/methods/api/remove.md), [`replace`](/methods/api/replace.md), [`swap`](/methods/api/swap.md) ### pickDirty Picks only the dirty parts of the given value, using the form's dirty tree as a structural mask. Object keys whose subtree contains no dirty descendant are omitted; arrays are treated as atomic and returned in full whenever any descendant is dirty. Returns `undefined` if no field is dirty. Where the supplied value's shape diverges from the form's input shape — for example, a field expected to be an object holds a primitive, `null` or array — that branch is returned as-is. Useful for filtering a validated output to just the changed parts before submitting. ```ts const dirty = pickDirty(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TValue` `extends object` #### Parameters - `form` `BaseFormStore` - `config` `PickDirtyConfig` ##### Explanation The `form` parameter is the form store providing the dirty mask. The `config` parameter must include a `from` value to filter. The value's shape is expected to match the form's input shape — wherever the shapes diverge (e.g. an object key in the form holds a primitive, `null` or array in the supplied value), that branch is returned as-is so the divergence is preserved in the result. Use this when a Valibot schema transformation produces a value of a different shape than the form's input and you want to ship only the dirty parts of that output. Internally, the function walks the form's field tree alongside the supplied value, using `getFieldBool` to skip clean subtrees and a constant-time check at each node to verify shape alignment. Because the dirty check is itself recursive, the cost is effectively linear in field count for typical balanced forms (shallow and wide) and degrades toward `O(N²)` for deeply nested trees. Call this method from submit or blur handlers rather than from tight reactive loops on large forms. #### Returns - `result` `DeepPartial | undefined` #### Related ##### Methods [`getDirtyInput`](/methods/api/getDirtyInput.md), [`getDirtyPaths`](/methods/api/getDirtyPaths.md), [`getInput`](/methods/api/getInput.md) ### remove Removes an item from a field array at the specified index. All items after the removed index are shifted down by one. ```ts remove(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Parameters - `form` `BaseFormStore` - `config` `RemoveConfig` ##### Explanation The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array and the index of the item to remove. #### Related ##### Primitives [`useForm`](/react/api/useForm.md), [`useFieldArray`](/react/api/useFieldArray.md) ##### Methods [`insert`](/methods/api/insert.md), [`move`](/methods/api/move.md), [`replace`](/methods/api/replace.md), [`swap`](/methods/api/swap.md) ### replace Replaces an item in a field array at the specified index with a new item. ```ts replace(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Parameters - `form` `BaseFormStore` - `config` `ReplaceConfig` ##### Explanation The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array, the index of the item to replace, and the new item values. #### Related ##### Primitives [`useForm`](/react/api/useForm.md), [`useFieldArray`](/react/api/useFieldArray.md) ##### Methods [`insert`](/methods/api/insert.md), [`move`](/methods/api/move.md), [`remove`](/methods/api/remove.md), [`swap`](/methods/api/swap.md) ### reset Resets the form or a specific field to its initial state or to a new initial input. Optionally keeps certain states like input values, touched state, or errors. ```ts reset(form); reset(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `ResetFormConfig | ResetFieldConfig | undefined` ##### Explanation When called without a config or with `path` set to `undefined`, the entire form is reset. When a `path` is provided, only that specific field and its nested fields are reset. By default, the form resets to its original initial input. However, you can pass a new `initialInput` in the config to update the form's baseline data. This is useful when remote data has changed and the form needs to reflect the updated values. Combined with `keepInput`, `keepTouched`, `keepEdited`, `keepErrors`, and `keepSubmitted`, you can update the initial state without overwriting the user's current edits. ###### More context on dirty tracking Formisch distinguishes between two concepts: - **Initial input**: the baseline value used for dirty tracking (often the server state). - **Current input**: the value the user is currently editing (the client state). Calling `reset` updates the initial input (baseline). Depending on the `keep*` options, it can also overwrite the current input, or keep it and just recompute state like `isDirty` based on the new baseline. > If the initial input is `null` or `undefined`, Formisch does not treat an empty string or `NaN` as dirty. This helps when HTML inputs produce `''` or `NaN` for "empty" values. #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`setInput`](/methods/api/setInput.md), [`getInput`](/methods/api/getInput.md), [`setErrors`](/methods/api/setErrors.md), [`validate`](/methods/api/validate.md) ### setErrors Sets or clears error messages on the form or a specific field. This is useful for setting custom validation errors that don't come from schema validation. ```ts setErrors(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `SetFormErrorsConfig | SetFieldErrorsConfig` ##### Explanation The `form` parameter is the form store to set errors on. The `config` parameter specifies the path and error messages to set, or can be set to null to clear existing errors. #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`getErrors`](/methods/api/getErrors.md), [`getDeepErrors`](/methods/api/getDeepErrors.md), [`validate`](/methods/api/validate.md) ### setInput Sets input values for the form or a specific field programmatically. ```ts setInput(form, config); setInput(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath | undefined = undefined` #### Parameters - `form` `BaseFormStore` - `config` `SetFormInputConfig | SetFieldInputConfig` ##### Explanation The `form` parameter is the form store to set input on. The `config` parameter specifies the path to the field and the new input values to set. > `setInput` updates the **current input** (what the user is editing), but it does not change the **initial input** (the baseline used for `isDirty`). If your baseline data changes (e.g. after refetching from the server), prefer [`reset`](/methods/api/reset.md) with a new `initialInput`. #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`getInput`](/methods/api/getInput.md), [`reset`](/methods/api/reset.md) ### submit Programmatically requests form submission by calling the native `requestSubmit()` method on the underlying form element. ```ts submit(form); ``` #### Parameters - `form` `BaseFormStore` ##### Explanation The `form` parameter is the form store to submit. The function triggers form submission by calling the native `requestSubmit()` method on the underlying form element. #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`handleSubmit`](/methods/api/handleSubmit.md), [`validate`](/methods/api/validate.md), [`focus`](/methods/api/focus.md) ### swap Swaps two items in a field array at the specified indices. ```ts swap(form, config); ``` #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Parameters - `form` `BaseFormStore` - `config` `SwapConfig` ##### Explanation The `form` parameter is the form store containing the field array. The `config` parameter specifies the path to the field array and the two indices of the items to swap. #### Related ##### Primitives [`useForm`](/react/api/useForm.md), [`useFieldArray`](/react/api/useFieldArray.md) ##### Methods [`insert`](/methods/api/insert.md), [`move`](/methods/api/move.md), [`remove`](/methods/api/remove.md), [`replace`](/methods/api/replace.md) ### validate Validates the entire form input against its schema. Returns a safe parse result indicating success or failure with detailed issues. Optionally focuses the first field with validation errors. ```ts const result = validate(form, config?); ``` #### Generics - `TSchema` `extends FormSchema` #### Parameters - `form` `BaseFormStore` - `config` `ValidateFormConfig | undefined` ##### Explanation The `form` parameter is the form store to validate. The optional `config` parameter allows specifying whether to automatically focus the first field with validation errors after validation. #### Returns - `result` `Promise>` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`focus`](/methods/api/focus.md), [`handleSubmit`](/methods/api/handleSubmit.md), [`setErrors`](/methods/api/setErrors.md), [`getErrors`](/methods/api/getErrors.md), [`getDeepErrors`](/methods/api/getDeepErrors.md) ## Types ### DeepErrorEntry Entry that pairs the `path` to a field with its error messages. Returned by the `getDeepErrorEntries` method. Form-level errors are included with an empty path. #### Generics - `TValue` `extends unknown` #### Definition - `DeepErrorEntry` - `path` `unknown extends TValue ? Path : readonly [] | FieldPath` - `errors` `[string, ...string[]]` #### Related ##### Methods [`getDeepErrorEntries`](/methods/api/getDeepErrorEntries.md) ### DeepPartial A utility type that recursively makes all properties and nested properties optional. > This type is too complex to display. Please refer to the [source code](https://github.com/open-circle/formisch/blob/main/packages/core/src/types/utils/utils.ts). #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ### EmptyInput Empty input interface that defines the value a required field of a given type starts at when no initial input is provided. Optional and nullable fields are not affected, as they accept `undefined`. #### Definition - `EmptyInput` - `string` `string | undefined` - `number` `number | undefined` - `boolean` `boolean | undefined` - `date` `Date | undefined` ##### Explanation Only required fields whose input is `undefined` fall back to these values. The `string` property defaults to an empty string so that an untouched field matches the DOM and validates with its own message instead of a type mismatch. The other properties default to `undefined`. #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Types [`FormConfig`](/react/api/FormConfig.md) ### FieldArrayStore Field array store interface that provides reactive access to the state of an array field created with [`injectFieldArray`](/angular/api/injectFieldArray.md) or the [`*formischFieldArray`](/angular/api/formischFieldArray.md) directive. #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Definition - `FieldArrayStore` - `path` `ValidArrayPath, TFieldArrayPath>` - `items` `Signal` - `errors` `Signal<[string, ...string[]] | null>` - `isTouched` `Signal` - `isEdited` `Signal` - `isDirty` `Signal` - `isValid` `Signal` ##### Explanation The `items` signal contains a unique identifier for every item of the array. Use it as the `track` expression of your `@for` block: the identifiers are stable across reorders, so Angular moves the existing DOM instead of recreating it, and the state of each field stays attached to the right item. The `errors` signal contains the validation errors of the array itself, for example from `v.nonEmpty()` or `v.maxLength()`, not the errors of the fields inside the array. ### FieldElement A union type representing form field elements that can be registered with a field store. #### Definition - `FieldElement` `HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement` #### Related ##### Methods [`focus`](/methods/api/focus.md) ### FieldStore Field store interface that provides reactive access to the state of a field created with [`injectField`](/angular/api/injectField.md) or the [`*formischField`](/angular/api/formischField.md) directive. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `FieldStore` - `path` `ValidPath, TFieldPath>` - `name` `Signal` - `input` `Signal, TFieldPath>>>` - `errors` `Signal<[string, ...string[]] | null>` - `isTouched` `Signal` - `isEdited` `Signal` - `isDirty` `Signal` - `isValid` `Signal` - `setInput` `(value: PartialValues, TFieldPath>>) => void` ##### Explanation Every reactive property of the field store is an Angular signal, so you call it as a function. The only exception is `path`, which is a plain value. The `name` signal contains the JSON-stringified path of the field, which the [`[formischControl]`](/angular/api/formischControl.md) directive writes to the `name` attribute of the element. It is also useful as the `id` of an input so that a label and an error message can reference it. Use `setInput` to change the value of the field programmatically. It updates the input and validates it like an `input` event would, so whether validation runs is controlled by the `validate` and `revalidate` config of your form — see the [validation](/angular/guides/validation.md) guide. The field store additionally carries an internal element-binding contract that the [`[formischControl]`](/angular/api/formischControl.md) directive consumes. It is not part of the public API. ### FocusFieldConfig Configuration interface for focusing a field. Used by the `focus` method to specify which field to focus and any additional focus options. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `FocusFieldConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`focus`](/methods/api/focus.md) ### FormConfig Form config interface that defines the configuration options for creating a form store with [`injectForm`](/angular/api/injectForm.md). #### Generics - `TSchema` `extends FormSchema` #### Definition - `FormConfig` - `schema` `TSchema` - `initialInput` `DeepPartial> | undefined` - `emptyInput` `EmptyInput | undefined` - `validate` `ValidationMode | undefined` - `revalidate` `Exclude | undefined` ##### Explanation The `FormConfig` object is passed to [`injectForm`](/angular/api/injectForm.md) with a required `schema` property and optional properties for `initialInput`, `emptyInput`, `validate`, and `revalidate` to control form behavior and validation timing. ### FormischFieldArrayContext The template context exposed by the [`*formischFieldArray`](/angular/api/formischFieldArray.md) directive. #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Definition - `FormischFieldArrayContext` - `$implicit` `FieldArrayStore` ##### Explanation The directive declares this interface as its template context through `ngTemplateContextGuard`. That is what types `let fieldArray` in your template and turns a path that does not point to an array into a compile error when `strictTemplates` is enabled. ### FormischFieldContext The template context exposed by the [`*formischField`](/angular/api/formischField.md) directive. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `FormischFieldContext` - `$implicit` `FieldStore` ##### Explanation The directive declares this interface as its template context through `ngTemplateContextGuard`. That is what types `let field` in your template and turns an invalid path into a compile error when `strictTemplates` is enabled. ### FormSchema Type definition that represents the Valibot schemas allowed as the root of a form. Forms must have an object root, so this is constrained structurally to any schema with an object output rather than to specific schema types. This includes object schemas, combinators (`intersect`, `union`, `variant`) over objects, `lazy` schemas wrapping any of these, and generic object schemas like `v.GenericSchema<{ … }>`. Use [Schema](/core/api/Schema.md) for nested field schemas. #### Definition - `FormSchema` `GenericSchema> | GenericSchemaAsync>` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`validate`](/methods/api/validate.md) ### FormStore Form store interface that provides reactive access to the state of a form created with [`injectForm`](/angular/api/injectForm.md). #### Generics - `TSchema` `extends FormSchema` #### Definition - `FormStore` - `isSubmitting` `Signal` - `isSubmitted` `Signal` - `isValidating` `Signal` - `isTouched` `Signal` - `isEdited` `Signal` - `isDirty` `Signal` - `isValid` `Signal` - `errors` `Signal<[string, ...string[]] | null>` ##### Explanation Every property of the form store is an Angular signal, so you call it as a function — both in your component class and in your template. Since the store is built from signals, it works with `OnPush` change detection and in zoneless applications without any subscriptions. The `errors` property only contains validation errors at the root level of the form. These are errors from the root object schema validation itself, not errors from nested fields. To retrieve all validation errors from all fields across the entire form, use the [`getDeepErrors`](/methods/api/getDeepErrors.md) method instead. ### GetFieldDeepErrorEntriesConfig Configuration interface for retrieving the error entries of a specific field. Used by the `getDeepErrorEntries` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `GetFieldDeepErrorEntriesConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`getDeepErrorEntries`](/methods/api/getDeepErrorEntries.md) ### GetFieldDeepErrorsConfig Configuration interface for retrieving the errors of a specific field. Used by the `getDeepErrors` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `GetFieldDeepErrorsConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`getDeepErrors`](/methods/api/getDeepErrors.md) ### GetFieldDirtyInputConfig Configuration interface for retrieving field-scoped dirty input. Used by the `getDirtyInput` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `GetFieldDirtyInputConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`getDirtyInput`](/methods/api/getDirtyInput.md) ### GetFieldDirtyPathsConfig Configuration interface for inspecting field-scoped dirty paths. Used by the `getDirtyPaths` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `GetFieldDirtyPathsConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`getDirtyPaths`](/methods/api/getDirtyPaths.md) ### GetFieldErrorsConfig Configuration interface for retrieving field-specific errors. Used by the `getErrors` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `GetFieldErrorsConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`getErrors`](/methods/api/getErrors.md) ### GetFieldInputConfig Configuration interface for retrieving field-specific input. Used by the `getInput` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `GetFieldInputConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`getInput`](/methods/api/getInput.md) ### GetFormDeepErrorEntriesConfig Configuration interface for retrieving the error entries of the entire form. Used by the `getDeepErrorEntries` method when no specific field path is provided. #### Definition - `GetFormDeepErrorEntriesConfig` - `path` `undefined = undefined` #### Related ##### Methods [`getDeepErrorEntries`](/methods/api/getDeepErrorEntries.md) ### GetFormDeepErrorsConfig Configuration interface for retrieving the errors of the entire form. Used by the `getDeepErrors` method when no specific field path is provided. #### Definition - `GetFormDeepErrorsConfig` - `path` `undefined = undefined` #### Related ##### Methods [`getDeepErrors`](/methods/api/getDeepErrors.md) ### GetFormDirtyInputConfig Configuration interface for retrieving form-level dirty input. Used by the `getDirtyInput` method when no specific field path is provided. #### Definition - `GetFormDirtyInputConfig` - `path` `undefined = undefined` #### Related ##### Methods [`getDirtyInput`](/methods/api/getDirtyInput.md) ### GetFormDirtyPathsConfig Configuration interface for inspecting form-level dirty paths. Used by the `getDirtyPaths` method when no specific field path is provided. #### Definition - `GetFormDirtyPathsConfig` - `path` `undefined = undefined` #### Related ##### Methods [`getDirtyPaths`](/methods/api/getDirtyPaths.md) ### GetFormErrorsConfig Configuration interface for retrieving form-level errors. Used by the `getErrors` method when no specific field path is provided. #### Definition - `GetFormErrorsConfig` - `path` `undefined = undefined` #### Related ##### Methods [`getErrors`](/methods/api/getErrors.md) ### GetFormInputConfig Configuration interface for retrieving form-level input. Used by the `getInput` method when no specific field path is provided. #### Definition - `GetFormInputConfig` - `path` `undefined = undefined` #### Related ##### Methods [`getInput`](/methods/api/getInput.md) ### InjectFieldArrayConfig Configuration object for creating a field array store with [`injectFieldArray`](/angular/api/injectFieldArray.md). #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Definition - `InjectFieldArrayConfig` - `path` `SignalOrValue, TFieldArrayPath>>` ##### Explanation The `path` may be passed as a plain array or as a signal, and must point to an array field of your schema. ### InjectFieldConfig Configuration object for creating a field store with [`injectField`](/angular/api/injectField.md). #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `InjectFieldConfig` - `path` `SignalOrValue, TFieldPath>>` ##### Explanation The `path` may be passed as a plain array or as a signal. Passing a signal is useful when the field a component points at changes over time, for example when the index of an item in a field array is bound to an input signal. ### InsertConfig Configuration interface for inserting items into array fields. Used by the `insert` method. #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Definition - `InsertConfig` - `path` `ValidArrayPath, TFieldArrayPath>` - `at` `number | undefined` - `initialInput` `DeepPartial, [...TFieldArrayPath, number]>> | undefined` #### Related ##### Methods [`insert`](/methods/api/insert.md) ### IsFieldDirtyConfig Configuration interface for checking whether a specific field is dirty. Used by the `isDirty` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `IsFieldDirtyConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`isDirty`](/methods/api/isDirty.md) ### IsFieldEditedConfig Configuration interface for checking whether a specific field is edited. Used by the `isEdited` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `IsFieldEditedConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`isEdited`](/methods/api/isEdited.md) ### IsFieldTouchedConfig Configuration interface for checking whether a specific field is touched. Used by the `isTouched` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `IsFieldTouchedConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`isTouched`](/methods/api/isTouched.md) ### IsFieldValidConfig Configuration interface for checking whether a specific field is valid. Used by the `isValid` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `IsFieldValidConfig` - `path` `ValidPath, TFieldPath>` #### Related ##### Methods [`isValid`](/methods/api/isValid.md) ### IsFormDirtyConfig Configuration interface for checking whether the entire form is dirty. Used by the `isDirty` method when no specific field path is provided. #### Definition - `IsFormDirtyConfig` - `path` `undefined = undefined` #### Related ##### Methods [`isDirty`](/methods/api/isDirty.md) ### IsFormEditedConfig Configuration interface for checking whether the entire form is edited. Used by the `isEdited` method when no specific field path is provided. #### Definition - `IsFormEditedConfig` - `path` `undefined = undefined` #### Related ##### Methods [`isEdited`](/methods/api/isEdited.md) ### IsFormTouchedConfig Configuration interface for checking whether the entire form is touched. Used by the `isTouched` method when no specific field path is provided. #### Definition - `IsFormTouchedConfig` - `path` `undefined = undefined` #### Related ##### Methods [`isTouched`](/methods/api/isTouched.md) ### IsFormValidConfig Configuration interface for checking whether the entire form is valid. Used by the `isValid` method when no specific field path is provided. #### Definition - `IsFormValidConfig` - `path` `undefined = undefined` #### Related ##### Methods [`isValid`](/methods/api/isValid.md) ### PartialValues Utility type that recursively makes all value properties optional, including nested objects and arrays. #### Generics - `TValue` `unknown` #### Definition - `PartialValues` `TValue | undefined` #### Related ##### Methods [`getInput`](/methods/api/getInput.md) ### Path Type definition for readonly arrays of path keys used to access nested properties. #### Definition - `Path` `ReadonlyArray` ### PathKey Type definition for keys used in paths to access nested properties in objects and arrays. #### Definition - `PathKey` `string | number` ### PickDirtyConfig Configuration interface for picking dirty parts of a value. Used by the `pickDirty` method. #### Generics - `TValue` `extends object` #### Definition - `PickDirtyConfig` - `from` `TValue` #### Related ##### Methods [`pickDirty`](/methods/api/pickDirty.md) ### MoveConfig Configuration interface for moving items within array fields. Used by the `move` method. #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Definition - `MoveConfig` - `path` `ValidArrayPath, TFieldArrayPath>` - `from` `number` - `to` `number` #### Related ##### Methods [`move`](/methods/api/move.md) ### RemoveConfig Configuration interface for removing items from array fields. Used by the `remove` method. #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Definition - `RemoveConfig` - `path` `ValidArrayPath, TFieldArrayPath>` - `at` `number` #### Related ##### Methods [`remove`](/methods/api/remove.md) ### ReplaceConfig Configuration interface for replacing items in array fields. Used by the `replace` method. #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Definition - `ReplaceConfig` - `path` `ValidArrayPath, TFieldArrayPath>` - `at` `number` - `initialInput` `DeepPartial, [...TFieldArrayPath, number]>> | undefined` #### Related ##### Methods [`replace`](/methods/api/replace.md) ### RequiredPath A type that represents a required path into an object structure with at least one key. > This type is too complex to display. Please refer to the [source code](https://github.com/open-circle/formisch/blob/main/packages/core/src/types/path/path.ts). #### Related ##### Methods [`focus`](/methods/api/focus.md), [`getErrors`](/methods/api/getErrors.md), [`getInput`](/methods/api/getInput.md), [`replace`](/methods/api/replace.md), [`setInput`](/methods/api/setInput.md), [`swap`](/methods/api/swap.md) ### ResetFieldConfig Configuration interface for resetting field-specific input and errors. Used by the `reset` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `ResetFieldConfig` - `path` `ValidPath, TFieldPath>` - `initialInput` `DeepPartial, TFieldPath>> = undefined` - `keepEdited` `boolean = false` - `keepErrors` `boolean = false` - `keepInput` `boolean = false` - `keepTouched` `boolean = false` #### Related ##### Methods [`reset`](/methods/api/reset.md) ### ResetFormConfig Configuration interface for resetting form input and errors. Used by the `reset` method when no specific field path is provided. #### Generics - `TSchema` `extends FormSchema` #### Definition - `ResetFormConfig` - `initialInput` `DeepPartial> = undefined` - `keepEdited` `boolean = false` - `keepErrors` `boolean = false` - `keepInput` `boolean = false` - `keepSubmitted` `boolean = false` - `keepTouched` `boolean = false` #### Related ##### Methods [`reset`](/methods/api/reset.md) ### Schema Schema type definition that represents any Valibot schema that can be used with Formisch. #### Definition - `Schema` `GenericSchema | GenericSchemaAsync` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`validate`](/methods/api/validate.md) ### SetFieldErrorsConfig Configuration interface for setting field-specific errors. Used by the `setErrors` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `SetFieldErrorsConfig` - `path` `ValidPath, TFieldPath>` - `errors` `[string, ...string[]] | null` #### Related ##### Methods [`setErrors`](/methods/api/setErrors.md) ### SetFieldInputConfig Configuration interface for setting field-specific input. Used by the `setInput` method when a specific field path is provided. #### Generics - `TSchema` `extends FormSchema` - `TFieldPath` `extends RequiredPath` #### Definition - `SetFieldInputConfig` - `path` `ValidPath, TFieldPath>` - `input` `PathValue, TFieldPath>` #### Related ##### Methods [`setInput`](/methods/api/setInput.md) ### SetFormErrorsConfig Configuration interface for setting form-level errors. Used by the `setErrors` method when no specific field path is provided. #### Definition - `SetFormErrorsConfig` - `path` `undefined = undefined` - `errors` `[string, ...string[]] | null` #### Related ##### Methods [`setErrors`](/methods/api/setErrors.md) ### SetFormInputConfig Configuration interface for setting form-level input. Used by the `setInput` method when no specific field path is provided. #### Generics - `TSchema` `extends FormSchema` #### Definition - `SetFormInputConfig` - `path` `undefined = undefined` - `input` `v.InferInput` #### Related ##### Methods [`setInput`](/methods/api/setInput.md) ### SignalOrValue A type that can be either a value or an Angular signal that returns that value. #### Generics - `TValue` `extends unknown` #### Definition - `SignalOrValue` `TValue | Signal` ##### Explanation Formisch accepts both plain values and signals wherever a form store or a field path is passed. This allows you to forward an input signal of your component directly, without unwrapping it first. ### SubmitEventHandler Function type for handling form submission with the submit event. Used by the `handleSubmit` method and form components. #### Generics - `TSchema` `extends FormSchema` #### Parameters - `output` `InferOutput` - `event` `SubmitEvent` #### Related ##### Methods [`handleSubmit`](/methods/api/handleSubmit.md) ##### Types [`SubmitHandler`](/core/api/SubmitHandler.md) ### SubmitHandler Function type for handling form submission without the submit event. Used by the `handleSubmit` method. #### Generics - `TSchema` `extends FormSchema` #### Parameters - `output` `InferOutput` #### Related ##### Methods [`handleSubmit`](/methods/api/handleSubmit.md) ##### Types [`SubmitEventHandler`](/core/api/SubmitEventHandler.md) ### SwapConfig Configuration interface for swapping items in array fields. Used by the `swap` method. #### Generics - `TSchema` `extends FormSchema` - `TFieldArrayPath` `extends RequiredPath` #### Definition - `SwapConfig` - `path` `ValidArrayPath, TFieldArrayPath>` - `at` `number` - `and` `number` #### Related ##### Methods [`swap`](/methods/api/swap.md) ### ValidArrayPath A utility type that validates array paths and returns the first possible valid array path based on the given value if the provided path is invalid. > This type is too complex to display. Please refer to the [source code](https://github.com/open-circle/formisch/blob/main/packages/core/src/types/path/path.ts). ### ValidateFormConfig Configuration interface for form validation. Used by the `validate` method to specify validation behavior. #### Definition - `ValidateFormConfig` - `shouldFocus` `boolean = false` #### Related ##### Methods [`validate`](/methods/api/validate.md) ### ValidationMode Validation mode type that defines when and how form validation is triggered. #### Definition - `ValidationMode` `'initial' | 'touch' | 'input' | 'change' | 'blur' | 'submit'` #### Related ##### Primitives [`useForm`](/react/api/useForm.md) ##### Methods [`validate`](/methods/api/validate.md)