# injectForm

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

Creates a reactive form store from a form configuration.

```ts
const form = injectForm<TSchema>(config);
```

## Generics

- `TSchema` `extends FormSchema`

## Parameters

- `config` `FormConfig<TSchema>`

### Explanation

With `injectForm` you create the store of your form based on a Valibot schema. The store manages the form state and exposes it as Angular signals, so you can call properties like `form.isValid()` directly in your template — including in `OnPush` and zoneless components.

Like Angular's own `inject`, `injectForm` must be called in an injection context, which means in a field initializer or the constructor of your component. Pass the returned store to the [`[formischForm]`](/angular/api/formischForm.md) directive to connect it to your `<form>` element.

## Returns

- `form` `FormStore<TSchema>`

## Examples

The following examples show how `injectForm` can be used.

### Basic form

```ts
import { Component } from '@angular/core';
import { FormischForm, injectForm } from '@formisch/angular';
import * as v from 'valibot';

const LoginSchema = v.object({
  email: v.pipe(v.string(), v.email()),
  password: v.pipe(v.string(), v.minLength(8)),
});

@Component({
  selector: 'app-login',
  imports: [FormischForm],
  template: `
    <form [formischForm]="loginForm" [formischSubmit]="handleSubmit">
      <!-- Form fields -->
    </form>
  `,
})
export class LoginComponent {
  readonly loginForm = injectForm({ schema: LoginSchema });

  readonly handleSubmit = (output: v.InferOutput<typeof LoginSchema>) => {
    console.log(output);
  };
}
```

### Initial input

```ts
readonly profileForm = injectForm({
  schema: ProfileSchema,
  initialInput: {
    name: 'Jane Doe',
    email: 'jane@example.com',
  },
});
```

### Validation timing

```ts
readonly signUpForm = injectForm({
  schema: SignUpSchema,
  validate: 'blur',
  revalidate: 'input',
});
```

## Related

The following APIs can be combined with `injectForm`.

### Functions

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

### Directives

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

### Methods

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