Installation

Below you will learn how to add Formisch to your project.

TypeScript

If you are using TypeScript, we recommend that you enable strict mode in your tsconfig.json so that all types are calculated correctly.

The minimum required TypeScript version is v5.0.2.

{
  "compilerOptions": {
    "strict": true,
    // ...
  }
}

We also recommend enabling strictTemplates in the angularCompilerOptions of your tsconfig.json. Formisch types the template context of its structural directives, so with strict templates an invalid field path or a wrong field type is reported directly in your template.

{
  "angularCompilerOptions": {
    "strictTemplates": true,
    // ...
  }
}

Install Valibot

Formisch uses Valibot for schema-based validation. You need to install it first because it is a peer dependency.

npm install valibot     # npm
yarn add valibot        # yarn
pnpm add valibot        # pnpm
bun add valibot         # bun
deno add npm:valibot    # deno

Install Formisch

You can add Formisch to your project with a single command using your favorite package manager.

npm install @formisch/angular     # npm
yarn add @formisch/angular        # yarn
pnpm add @formisch/angular        # pnpm
bun add @formisch/angular         # bun
deno add npm:@formisch/angular    # deno

Then you can import it into any JavaScript or TypeScript file.

import { … } from '@formisch/angular';

Formisch ships standalone directives. Add the ones you use, such as FormischForm and FormischField, to the imports array of your component — there is no NgModule to import.

Formisch requires Angular v19 or later, since it is built on top of signals, input.required and afterRenderEffect.

For AI Agents

We provide agent skills that teach AI agents the correct patterns for working with Valibot and Formisch. You can install them by running the following command in your terminal:

npx skills add open-circle/agent-skills --skill formisch valibot

You can learn more about the Valibot and Formisch agent skill here.