Adding custom form components while using a library integration? #184

scottmccaughey · 2026-01-22T18:31:53Z

scottmccaughey
Jan 22, 2026

Thanks for all the work you've put into this library - it's really great.

I started off building a custom integration for my project, but ran into some issues and ended up using the PrimeNG integration instead. That said, I still need to add a couple of custom field types (a PickList, which is built into PrimeNG, and a JSON Editor, which is not). Is there a way to add custom field types while still using the built-in PrimeNG integration, or do I need to switch back to a full custom integration?

antimprisacaru · 2026-01-23T12:56:50Z

antimprisacaru
Jan 23, 2026
Maintainer

Hey @scottmccaughey, thanks so much for the kind words, and for being an early adopter! I'd love to hear more about your experience so far - what's working well, what's confusing, any rough edges you've hit? I'm looking to continue improving it, and feedback from usage is very important for me :)

To answer your question: Yes, you can add custom field types while using the built-in PrimeNG integration. No need to switch to a full custom integration.

The provideDynamicForm() accepts an array, so you can spread the PrimeNG fields and add your own:

import { provideDynamicForm } from '@ng-forge/dynamic-forms';
import { withPrimeNgFields } from '@ng-forge/dynamic-forms-primeng';
import { pickListFieldType, jsonEditorFieldType } from './custom-fields';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDynamicForm(
      ...withPrimeNgFields(),
      pickListFieldType,    // Your custom PrimeNG PickList
      jsonEditorFieldType   // Your custom JSON Editor
    ),
  ],
};

For reference, you can look at how the PrimeNG fields are implemented on our side.

For most custom fields, you can use the [formField] directive directly on your input element - it handles the two-way binding with the FieldTree automatically. However, for something like a JSON editor where you need to transform between types (object ↔ string), you'll want a wrapper component that implements FormValueControl from Angular Signal Forms to handle the conversion. Here's a quick example, though I'd improve on it a bit:

json-editor.field.ts

import { FieldTypeDefinition, BaseValueField } from '@ng-forge/dynamic-forms';
import { valueFieldMapper } from '@ng-forge/dynamic-forms/integration';

export interface JsonEditorFieldDef extends BaseValueField<{ placeholder?: string }, object> {
  type: 'json-editor';
}

export const jsonEditorFieldType: FieldTypeDefinition<JsonEditorFieldDef> = {
  name: 'json-editor',
  loadComponent: () => import('./json-editor.component'),
  mapper: (fieldDef) => valueFieldMapper(fieldDef),
};

// Module augmentation for type-safety (optional)
declare module '@ng-forge/dynamic-forms' {
  interface FieldRegistryLeaves {
    'json-editor': JsonEditorFieldDef;
  }
}

json-editor.component.ts

import { Component, input } from '@angular/core';
import { FieldTree, FormField } from '@angular/forms/signals';
import { ValueFieldComponent } from '@ng-forge/dynamic-forms';
import { JsonTextareaComponent } from './json-textarea.component';

type JsonEditorComponent = ValueFieldComponent<JsonEditorFieldDef>;

@Component({
  selector: 'df-json-editor',
  imports: [JsonTextareaComponent, FormField],
  template: `
    @if (label()) {
      <label [for]="key()">{{ label() }}</label>
    }
    <app-json-textarea [formField]="field()" />
  `,
})
export default class JsonEditorComponent implements JsonEditorComponent {
  readonly field = input.required<FieldTree<object>>();
  readonly key = input.required<string>();
  readonly label = input<string>();
}

json-textarea.component.ts (FormValueControl wrapper)

import { Component, model, signal, effect } from '@angular/core';
import { FormValueControl } from '@angular/forms/signals';

@Component({
  selector: 'app-json-textarea',
  template: `
    <textarea
      [value]="jsonString()"
      (input)="onInput($event)"
      [class.invalid]="parseError()"
      rows="6"
    ></textarea>
    @if (parseError()) {
      <div class="error">{{ parseError() }}</div>
    }
  `,
})
export class JsonTextareaComponent implements FormValueControl<object> {
  // FormValueControl interface - synced by [formField]
  readonly value = model<object>({});

  // Local string for the textarea (doesn't reset on invalid JSON)
  protected readonly jsonString = signal('{}');
  protected readonly parseError = signal<string | null>(null);

  constructor() {
    // Sync incoming object value -> string
    effect(() => {
      this.jsonString.set(JSON.stringify(this.value(), null, 2));
    });
  }

  protected onInput(event: Event): void {
    const text = (event.target as HTMLTextAreaElement).value;
    this.jsonString.set(text);
    try {
      this.value.set(JSON.parse(text));
      this.parseError.set(null);
    } catch {
      this.parseError.set('Invalid JSON');
    }
  }
}

You can also find more details on building custom integrations here, I'll try to enhance the docs on this topic on the next iterations.

14 replies

scottmccaughey Feb 2, 2026
Author

FormEvent is being imported from the library:

import { DynamicForm, FormEvent, type FormConfig } from '@ng-forge/dynamic-forms';

I actually shifted gears last week and decided to go back to just using a custom integration because I needed to be able to have control over the field labels and error display. In general I've used the Bootstrap integration as the basis for most of the fields, with my reasoning being that was probably the one that was the closest to pure HTML without custom Angular components. As I said, in general it's all working great.

I've added the files related to the button component to a private repo that I just shared with you, if you don't mind taking a look. I can obviously add whatever else would be helpful, but since I'm working on the app for a client I unfortunately can't give you access to the entire repo.

One additional data point...I tried defining the button field like this:

{
  key: 'test-event',
  type: 'button',
  label: 'Test Event',
  event: {
    type: 'test-event',
  }
}

instead of this:

{
  key: 'test-event',
  type: 'button',
  label: 'Test Event',
  event: TestEvent,
}

...and my IDE at least doesn't complain about that. But then when I click the button in a browser, the error I get is:

ERROR TypeError: eventConstructor is not a constructor
    at _EventBus.dispatch (ng-forge-dynamic-forms-ng-forge-dynamic-forms-BWFdMPyw.mjs:5181:19)
    at _ButtonFieldComponent.dispatchEvent (button.component.ts:93:21)
    at _ButtonFieldComponent.onClick (button.component.ts:70:12)
    at ButtonFieldComponent_Template_usitc_uswds_button_buttonClick_0_listener (button.component.html:2:18)
    at executeListenerWithErrorHandling (_debug_node-chunk.mjs:7956:12)
    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (_debug_node-chunk.mjs:7943:18)
    at ConsumerObserver2.next (Subscriber.js:96:33)
    at Subscriber2._next (Subscriber.js:63:26)
    at Subscriber2.next (Subscriber.js:34:18)
    at Subject.js:41:34

antimprisacaru Feb 2, 2026
Maintainer

Passing event like this won't work, because it needs class, such that it can call its constructor

{
  key: 'test-event',
  type: 'button',
  label: 'Test Event',
  event: {
    type: 'test-event',
  }
}

So currently there are 2 ways to handle custom buttons with events:

Use button definition and pass EventType as arg:

export type ButtonFieldDef<TEvent extends FormEvent> = ButtonField<UsitcButtonProps, TEvent> & {
  props?: UsitcButtonProps;
  type: 'button';
}

You have to make your base field def use the ButtonField type, because it declares event: FormEventConstructor<TEvent>. This is different from typing the event as EventType - it will accept the constructor instead of an instance (hence why you'll be able to pass TestEvent class instead of new TestEvent().

Make a button wrapper, where you don't have to pass the event in form config, and it will be appended in the mapper.

const inputs: Record<string, unknown> = {
      ...baseInputs,
      event: AddArrayItemEvent,
      eventArgs,
      eventContext: {
        key: fieldDef.key,
        index: getIndex(),
        arrayKey: targetArrayKey ?? '',
        formValue: arrayContext?.formValue ?? {},
      },
    };

This is part of the computed and will append the event by default when drilling down to the component. Types in bootstrap are a bit outdated atm, will modernize them, because the RemoveArrayItemButtonFieldDef would rather be typed as export interface RemoveArrayItemButtonFieldDef extends Omit<ButtonFieldDef<RemoveArrayItemEvent>, 'event'> {.

Btw, you can also contact me on Discord if you want a direct chat, I'm zavros or zavros#8076

scottmccaughey Feb 2, 2026
Author

The first solution works perfectly, thanks Antim! I'm not sure why I had moved away from using the ButtonField type...I had probably just changed it when trying to fix something and should have changed it back.

scottmccaughey Feb 2, 2026
Author

Also, I added you on Discord. I'll try not to pester you with too many questions!

antimprisacaru Feb 2, 2026
Maintainer

I saw you used the types from Bootstrap adapter, I need to update those as well as they're a bit outdated so yeah...

Slowly getting there with the arrays too. Should be a better experience in the next minor :)

Feel free to ask anything on Discord though, I'll respond quicker there. Might be slip ups or poorly documented parts around still

Navigation Menu

Uh oh!

Adding custom form components while using a library integration? #184

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 14 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Adding custom form components while using a library integration? #184

Uh oh!

scottmccaughey Jan 22, 2026

Replies: 1 comment · 14 replies

Uh oh!

Uh oh!

antimprisacaru Jan 23, 2026 Maintainer

Uh oh!

scottmccaughey Feb 2, 2026 Author

Uh oh!

antimprisacaru Feb 2, 2026 Maintainer

Uh oh!

scottmccaughey Feb 2, 2026 Author

Uh oh!

scottmccaughey Feb 2, 2026 Author

Uh oh!

antimprisacaru Feb 2, 2026 Maintainer

scottmccaughey
Jan 22, 2026

Replies: 1 comment 14 replies

antimprisacaru
Jan 23, 2026
Maintainer

scottmccaughey Feb 2, 2026
Author

antimprisacaru Feb 2, 2026
Maintainer

scottmccaughey Feb 2, 2026
Author

scottmccaughey Feb 2, 2026
Author

antimprisacaru Feb 2, 2026
Maintainer