# formischControl

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

Directive that binds a native form control to a field of your form. It is exported as the `FormischControl` class.

```angular-html
<input [formischControl]="field" />
```

## Generics

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

## Inputs

- `formischControl` `FieldStore<TSchema, TFieldPath>`

### Explanation

The `[formischControl]` directive connects a field store to a native form control. It writes the current input of the field into the element, keeps the `name` and `aria-invalid` attributes in sync, wires the `input`, `change`, `focus` and `blur` events that drive validation, and registers the element so that focusing the first invalid field on submit and the [`focus`](/methods/api/focus.md) method work.

Because the directive owns the value of the element, you must not bind `[value]` or `[checked]` to hold the state of the field yourself. Radio and checkbox groups are an exception: bind every element of the group to the same field and give each its own `value` attribute, which identifies the option rather than the state of the field.

The directive knows the quirks of each element type. It sets `value` on text inputs, `checked` on checkboxes and radios, and the selected state of the options of a `<select />`. Since a `<select />` ignores a value for which no matching option exists yet, the directive also observes the options and re-applies the input when they render later. A file input can only be cleared, because browsers do not allow a file selection to be set programmatically.

Both type arguments are inferred from the field store you pass. Keep components that take a field store as an input generic over `TSchema` and `TFieldPath` — the store is invariant, so a component that widens it to the default `FieldStore` cannot accept a concrete field.

To import the directive, add the `FormischControl` class to the `imports` array of your component.

## Related

The following APIs can be combined with `formischControl`.

### Functions

[`injectField`](/angular/api/injectField.md), [`injectForm`](/angular/api/injectForm.md)

### Directives

[`formischField`](/angular/api/formischField.md), [`formischFieldArray`](/angular/api/formischFieldArray.md), [`formischForm`](/angular/api/formischForm.md)

### Methods

[`focus`](/methods/api/focus.md), [`getInput`](/methods/api/getInput.md), [`reset`](/methods/api/reset.md), [`setInput`](/methods/api/setInput.md)