# formischForm

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

Directive that turns a native `<form>` element into a Formisch-managed form. It is exported as the `FormischForm` class.

```angular-html
<form [formischForm]="form" [formischSubmit]="handleSubmit">
  <!-- Form content here -->
</form>
```

## Generics

- `TSchema` `extends FormSchema`

## Inputs

- `formischForm` `FormStore<TSchema>`
- `formischSubmit` `SubmitEventHandler<TSchema>`

### Explanation

The `[formischForm]` directive attaches a form store to a native `<form>` element. When the form is submitted, it validates the input against your schema, focuses the first invalid field, and calls your submit handler only if validation succeeds. It also adds `novalidate` to the element to disable the browser's own validation, since Formisch handles validation internally, and registers the element so that the [`submit`](/methods/api/submit.md) method can reach it.

The `[formischSubmit]` input receives your handler as a function reference instead of calling it in the template. That way Formisch can await the promise it returns and keep `form.isSubmitting()` up to date, and register the pending submission with Angular's `PendingTasks` so server-side rendering and tests wait for it.

> Declare your handler as an arrow function property. A regular class method would lose its `this` when it is passed as a reference.

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

## Related

The following APIs can be combined with `formischForm`.

### Functions

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

### Directives

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

### Methods

[`focus`](/methods/api/focus.md), [`getDeepErrors`](/methods/api/getDeepErrors.md), [`handleSubmit`](/methods/api/handleSubmit.md), [`reset`](/methods/api/reset.md), [`submit`](/methods/api/submit.md), [`validate`](/methods/api/validate.md)