# injectFieldArray

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

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

```ts
const fieldArray = injectFieldArray<TSchema, TFieldArrayPath>(form, config);
```

## Generics

- `TSchema` `extends FormSchema`
- `TFieldArrayPath` `extends RequiredPath`

## Parameters

- `form` `SignalOrValue<FormStore<TSchema>>`
- `config` `InjectFieldArrayConfig<TSchema, TFieldArrayPath>`

### 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<TSchema, TFieldArrayPath>`

## 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) {
      <button type="button" (click)="handleRemove(index)">Delete</button>
    }
    @if (fieldArray.errors(); as errors) {
      <div>{{ errors[0] }}</div>
    }
  `,
})
export class TodoListComponent {
  readonly of = input.required<FormStore<typeof TodoListSchema>>();

  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)