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.
| Input | Type | Default |
|---|---|---|
schema Two-way model containing the form title, sections, and fields. | ModelSignal<FormBuilderSchema> | createDefaultFormBuilderSchema() |
paletteTitle Title shown above the field palette. | string | Fields |
inspectorTitle Title shown above the field settings inspector. | string | Field properties |
| Event | Description | Type |
|---|---|---|
| fieldSelected | Emitted when a canvas field is selected. | FormBuilderFieldChange |
| fieldAdded | Emitted when a field is inserted from the palette. | FormBuilderFieldChange |
| fieldRemoved | Emitted when a field is deleted from the canvas. | FormBuilderFieldChange |
| Input | Type | Default |
|---|---|---|
schema* Saved builder schema to render as an Angular reactive form. | FormBuilderSchema | – |
value Two-way model for runtime form values. | Record<string, any> | {} |
readonly Disables all controls and hides the submit button when used with showSubmit. | boolean | false |
showSubmit Whether the renderer shows its built-in submit button. | boolean | true |
submitLabel Text for the built-in submit button. | string | Submit |
| Event | Description | Type |
|---|---|---|
| formSubmit | Emitted with raw form value when the rendered form is valid and submitted. | Record<string, any> |
| formReady | Emitted after the renderer creates the FormGroup. | FormGroup |
| Helper | Description | Returns |
|---|---|---|
| provideFormBuilder | Environment provider for custom field definitions and settings definitions. | EnvironmentProviders |
| formBuilderField | Helper for defining a field type with defaults, lazy renderer, lazy settings, and validators. | FormBuilderFieldDefinition |
| formBuilderSettings | Helper for registering a settings component for an existing field type. | FormBuilderSettingsDefinition |
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.