Schema-based forms for Angular 21+
Hand ForgeForm a TypeScript schema and get back a fully-wired Angular reactive form - validation, errors and conditional fields, free.
const schema: FormSchema = {
controls: [
{ type: 'text', controlName: 'projectName',
label: 'Project name', placeholder: 'my-app',
validators: [required(), minLength({ value: 3 })] },
{ type: 'select', controlName: 'framework',
label: 'Framework', items: [/* … */] },
{ type: 'checkbox', controlName: 'ssr',
label: 'Enable SSR', updateOn: 'change' },
],
};required(), minLength(), min() - or a custom validator fn with a matching error key. Every message can be the built-in default, a string, a function, or a component.
validators: [
required(),
minLength({ value: 3, errorMessage: 'Too short' }),
min({ value: 18,
errorMessage: (err) => `Must be at least ${err['min']}` }),
]Form value and validity are exposed as signals - read them in templates, computeds and effects to drive a preview or your own submit button. No subscriptions.
Show, hide, enable or disable any field from the rest of the form.
Render your own components as hints or error messages. Hint components are handed the live control, value, errors and schema - extend FormFieldContextComponent for typed access.
Take just the flexbox structure, or the bundled theme, then re-skin it by overriding a handful of CSS variables. Nothing is locked in.
Quick start
Import the component, declare a schema, drop one tag in your template. No NgModule, no app-level providers for basic use.
import { FormRendererComponent, FormSchema,
required, minLength } from '@forge-form/angular';
@Component({
selector: 'app-user-form',
imports: [FormRendererComponent],
template: `<forge-form-angular
[schema]="schema"
(formSubmit)="onSubmit($event)" />`,
})
export class UserFormComponent {
schema: FormSchema = {
updateOn: 'blur',
options: { orientation: 'column', theme: 'default' },
controls: [
{ type: 'text', controlName: 'firstName',
label: 'First name',
validators: [required(), minLength({ value: 3 })] },
{ type: 'number', controlName: 'age',
label: 'Age', validators: [required()] },
],
};
onSubmit(value: unknown) { console.log(value); }
}FAQ
ForgeForm (@forge-form/angular) is a schema-driven, signal-based forms library for Angular 21+. You describe your form as a plain TypeScript object - fields, validators, hints, layout and conditional visibility - and ForgeForm builds the Angular reactive form, renders the inputs, and returns a typed value on submit. No form markup required.
ForgeForm runs on Angular Reactive Forms under the hood, but you never write FormGroup/FormControl or template markup by hand. Instead of wiring controls, validators and error display manually, you declare one FormSchema and the engine builds and renders everything - so you keep full reactive-forms power without the boilerplate.
No. Angular's Signal Forms is a separate, experimental Angular feature. ForgeForm is an independent library that is signal-based - its form value and validity are exposed as Angular signals - while building on the stable Reactive Forms API, so you can use it in production on Angular 21+ today.
Define a FormSchema object listing your controls (each with a type, controlName and optional validators), then drop <forge-form-angular [schema]="schema" (formSubmit)="onSubmit($event)" /> into your template. Import FormRendererComponent as a standalone component - no NgModule needed.
Out of the box it ships text, number, checkbox and select fields, plus built-in required, minLength, maxLength, min and max validators. You can add your own rules with customValidator(), set any error message as a string, a function or a component, and add hints as text or your own component.
Yes - ForgeForm is free and open source under the MIT license. It requires Angular 21.2+ (@angular/core, @angular/common, @angular/forms) and RxJS 7.8+ as peer dependencies.
