injectField
Creates a reactive field store for a specific field within a form store.
const field = injectField<TSchema, TFieldPath>(form, config);Generics
TSchemaextends FormSchemaTFieldPathextends RequiredPath
Parameters
formSignalOrValue<FormStore<TSchema>>configInjectFieldConfig<TSchema, TFieldPath>
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] 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 directive instead, which is a thin wrapper around this function.
Returns
fieldFieldStore<TSchema, TFieldPath>
Examples
The following examples show how injectField can be used.
Field component
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: `
<input [formischControl]="field" type="email" />
@if (field.errors(); as errors) {
<div>{{ errors[0] }}</div>
}
`,
})
export class EmailInputComponent {
readonly of = input.required<FormStore<typeof EmailSchema>>();
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
ValidPathis 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 overTSchemaandTFieldPath— see the TypeScript guide.
Set the input programmatically
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.