# injectField

> This document is the Markdown version of [formisch.dev/angular/api/injectField/](https://formisch.dev/angular/api/injectField/). For the complete documentation index, see [llms.txt](https://formisch.dev/llms.txt).

Creates a reactive field store for a specific field within a form store.

```ts
const field = injectField<TSchema, TFieldPath>(form, config);
```

## Generics

- `TSchema` `extends FormSchema`
- `TFieldPath` `extends RequiredPath`

## Parameters

- `form` `SignalOrValue<FormStore<TSchema>>`
- `config` `InjectFieldConfig<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]`](/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<TSchema, TFieldPath>`

## 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: `
    <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 `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)