ng-forge generates fully working Angular forms from a single configuration object — validation, conditional logic, and multi-step wizards included. Here's how to set it up.

1. Choose Your UI Library

Installation

npm install @ng-forge/dynamic-forms @ng-forge/dynamic-forms-material @angular/material @angular/cdk

Styles

// styles.scss — add a prebuilt Material theme (required)
@import '@angular/material/prebuilt-themes/azure-blue.css';

Setup

import { provideDynamicForm } from '@ng-forge/dynamic-forms';
import { withMaterialFields } from '@ng-forge/dynamic-forms-material';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    provideDynamicForm(...withMaterialFields()),
  ],
};

Notable Adapter Props

OptionDescription
appearanceSet 'fill' or 'outline' on text inputs, select, and datepicker
colorTheme palette ('primary', 'accent', 'warn') for checkbox, toggle, radio, and slider
labelPositionLabel placement ('before' | 'after') on checkbox, radio, and multi-checkbox
subscriptSizing'fixed' reserves space for hint/error; 'dynamic' collapses when empty
floatLabel'auto', 'always', or 'never' label float behavior
hideRequiredMarkerHide the required asterisk on form fields
hintHelper text below any field

2. Your First Form

Every adapter uses the same FormConfig schema — import DynamicForm and bind a config object:

@Component({
  imports: [DynamicForm],
  template: `<form [dynamic-form]="config"></form>`,
})
export class ContactComponent {
  config = {
    fields: [
      /* see Config tab below */
    ],
  } as const satisfies FormConfig;
}

Try it out — select a contact method and watch fields appear. Switch to the "Config" tab to see the full schema:

Material Material

Requirements

  • Angular 21+ — required for signal support
  • TypeScript 5.6+ — for best type inference

Community & Support

  • Discord — Ask questions, share what you've built, and chat with the community
  • GitHub Issues — Report bugs or request features
  • Contributing — Learn how to contribute to ng-forge

Next Steps