# formischFieldArray

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

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
<ng-container *formischFieldArray="['todos'] of form; let fieldArray">
  <!-- Field array content here -->
</ng-container>
```

## Generics

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

## Inputs

- `formischFieldArray` `ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>`
- `formischFieldArrayOf` `FormStore<TSchema>`

## Context

- `$implicit` `FieldArrayStore<TSchema, TFieldArrayPath>`

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