Form Builder

Form Builder creates schema-driven forms with a drag-and-drop builder, a runtime renderer, and provider-based registration for field types and field-specific settings panels.

Use it for admin-configurable forms, document templates, onboarding builders, tenant-specific field layouts, surveys, intake flows, and other places where product teams need to compose fields without changing Angular templates.

Hidden fields use type: 'hidden'. They render as native input type="hidden" controls in runtime forms, stay editable in the builder inspector, and are included in raw submitted values.

Basic renderer

Render a saved builder schema as a reactive form.

Submitted value

{
  "company": "Elementar Labs",
  "company_logo": {
    "name": "solo-logo.svg",
    "size": 42000,
    "type": "image/svg+xml"
  },
  "currency": "usd",
  "seats": 12,
  "seat_price": 24,
  "contact_name": "Alex Morgan",
  "contact_email": "alex@example.com"
}

External renderer flow

Keep the schema reusable and pass the runtime step layout directly to the renderer from a dedicated example page.

Open external flow example

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

Form Builder

Basic renderer

Company

Billing contacts

External renderer flow

Source code, templates, and commercial support

Form Builder

Basic renderer

External renderer flow

Source code, templates, and commercial support

Build the surrounding workflow