Angular · TypeScript · Open Source

Define fields.
Attach triggers.
Ship the form.

A TypeScript-first form engine for Angular. Async validation, API-driven selects, dynamic arrays, lazy-loaded components, and custom field models all declared in field models, no component glue.

$ {{ heroInstall }}
login.component.ts
@for (line of heroSnippet; track line.n) {
{{ line.n }}
}

All the hard parts, declared.

The common patterns in complex forms, extracted into a composable model layer.

@for (feature of features; track feature.title) {
{{ feature.icon }}
{{ feature.title }}
{{ feature.desc }}
}

One object replaces a subscriber.

Triggers are the unit of reactivity in Preforms. Attach them to any field, point them at an event, and let the engine handle the rest.

Async validation hits your API without handwritten glue.

A dependent select fetches its options when a parent value changes.

A dialog opens when an icon is clicked and closes on a button command.

No RxJS, no ViewChild, no parent component managing it all.

Async validation
@for (line of asyncSnippet; track line.n) {
{{ line.n }}
}
Dependent select
@for (line of selectSnippet; track line.n) {
{{ line.n }}
}

See what's possible.

Every example is interactive and linked to source.

@for (example of examples; track example.title) { {{ example.tag }}
{{ example.title }}
{{ example.desc }}
→ view
}
custom-field.ts
@for (line of customFieldSnippet; track line.n) {
{{ line.n }}
}

Custom fields in two steps.

The engine doesn't know what an "editor" is. You tell it. Extend FormField, register an Angular component against the type key, and the renderer handles the rest.

Rich text editors, date pickers, map inputs, anything Angular can render.

Components load lazily, so there is no bundle cost until the field appears.

Custom fields participate in triggers, validation, and aggregates like any built-in.

Ready to stop writing form glue?

Preforms is open source and MIT licensed. The docs have working examples for every feature.