# formischField

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

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
<input
  *formischField="['email'] of form; let field"
  [formischControl]="field"
/>
```

## Generics

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

## Inputs

- `formischField` `ValidPath<v.InferInput<TSchema>, TFieldPath>`
- `formischFieldOf` `FormStore<TSchema>`

## Context

- `$implicit` `FieldStore<TSchema, TFieldPath>`

### 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 `<ng-container>` 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)