PrimeNG

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideDynamicForm } from '@ng-forge/dynamic-forms';
import { withPrimeNGFields } from '@ng-forge/dynamic-forms-primeng';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    provideDynamicForm(...withPrimeNGFields()),
    providePrimeNG({
      theme: {
        preset: Aura,
      },
    }),
  ],
};

@import 'primeicons/primeicons.css';

import Aura from '@primeuix/themes/aura';
import Lara from '@primeuix/themes/lara';
import Nora from '@primeuix/themes/nora';

providePrimeNG({
  theme: {
    preset: Aura, // or Lara, Nora, etc.
  },
});

import { Component, signal } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { DynamicForm, type FormConfig } from '@ng-forge/dynamic-forms';

@Component({
  selector: 'app-contact-form',
  imports: [DynamicForm, JsonPipe],
  template: `
    <form [dynamic-form]="config" [(value)]="formValue"></form>
    @let value = formValue();
    <pre>{{ value | json }}</pre>
  `,
})
export class ContactFormComponent {
  formValue = signal({});

  config = {
    fields: [
      {
        key: 'name',
        type: 'input',
        value: '',
        label: 'Full Name',
        required: true,
        props: {
          variant: 'outlined',
        },
      },
      {
        key: 'email',
        type: 'input',
        value: '',
        label: 'Email',
        required: true,
        email: true,
        props: {
          type: 'email',
          variant: 'outlined',
        },
      },
      {
        key: 'message',
        type: 'textarea',
        value: '',
        label: 'Message',
        required: true,
        minLength: 10,
        props: {
          rows: 4,
        },
      },
      {
        type: 'submit',
        key: 'submit',
        label: 'Send Message',
        props: {
          severity: 'primary',
        },
      },
    ],
  } as const satisfies FormConfig;
}

{
  key: 'email',
  type: 'input',
  value: '',
  label: 'Email Address',
  required: true,
  email: true,
  props: {
    type: 'email',
    variant: 'outlined',
    placeholder: 'Enter your email',
    hint: 'We will never share your email',
  },
}

{
  key: 'bio',
  type: 'textarea',
  value: '',
  label: 'Biography',
  placeholder: 'Tell us about yourself',
  required: true,
  minLength: 50,
  maxLength: 500,
  props: {
    rows: 6,
    autoResize: true,
    hint: 'Maximum 500 characters',
  },
}

{
  key: 'country',
  type: 'select',
  value: '',
  label: 'Country',
  required: true,
  options: [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' },
    { value: 'au', label: 'Australia' },
  ],
  props: {
    filter: true,
    showClear: true,
    placeholder: 'Select a country',
  },
}

{
  key: 'size',
  type: 'radio',
  value: '',
  label: 'Select Size',
  required: true,
  options: [
    { value: 'small', label: 'Small' },
    { value: 'medium', label: 'Medium' },
    { value: 'large', label: 'Large' },
  ],
  props: {
    hint: 'Choose your preferred size',
  },
}

{
  key: 'terms',
  type: 'checkbox',
  value: false,
  label: 'I accept the terms and conditions',
  required: true,
  props: {
    binary: true,
  },
}

{
  key: 'interests',
  type: 'multi-checkbox',
  value: [],
  label: 'Select Your Interests',
  required: true,
  options: [
    { value: 'sports', label: 'Sports' },
    { value: 'music', label: 'Music' },
    { value: 'reading', label: 'Reading' },
    { value: 'travel', label: 'Travel' },
    { value: 'cooking', label: 'Cooking' },
  ],
  props: {
    hint: 'Select all that apply',
  },
}

{
  key: 'notifications',
  type: 'toggle',
  value: false,
  label: 'Enable email notifications',
  props: {
    hint: 'Receive updates via email',
  },
}

{
  key: 'volume',
  type: 'slider',
  value: 50,
  label: 'Volume',
  minValue: 0,
  maxValue: 100,
  step: 5,
  props: {
    hint: 'Adjust audio volume',
  },
}

{
  key: 'birthdate',
  type: 'datepicker',
  value: null,
  label: 'Date of Birth',
  required: true,
  minDate: new Date('1900-01-01'),
  maxDate: new Date(),
  props: {
    dateFormat: 'mm/dd/yy',
    showIcon: true,
    showButtonBar: true,
    hint: 'Select your birth date',
  },
}

{
  type: 'submit',
  key: 'submit',
  label: 'Create Account',
  props: {
    severity: 'primary',
    icon: 'pi pi-check',
    iconPos: 'right',
  },
}

{
  fields: [
    {
      key: 'step1',
      type: 'page',
      fields: [
        { key: 'step1Title', type: 'text', label: 'Personal Information', props: { elementType: 'h3' } },
        { key: 'step1Desc', type: 'text', label: 'Tell us about yourself' },
        { key: 'firstName', type: 'input', value: '', label: 'First Name', required: true },
        { key: 'lastName', type: 'input', value: '', label: 'Last Name', required: true },
        {
          type: 'next',
          key: 'next',
          label: 'Continue',
          props: { severity: 'primary', icon: 'pi pi-arrow-right', iconPos: 'right' },
        },
      ],
    },
    {
      key: 'step2',
      type: 'page',
      fields: [
        { key: 'step2Title', type: 'text', label: 'Contact Information', props: { elementType: 'h3' } },
        { key: 'email', type: 'input', value: '', label: 'Email', required: true, email: true },
        { key: 'phone', type: 'input', value: '', label: 'Phone', props: { type: 'tel' } },
        {
          key: 'navigation',
          type: 'row',
          fields: [
            { type: 'previous', key: 'back', label: 'Back', props: { icon: 'pi pi-arrow-left' } },
            { type: 'submit', key: 'submit', label: 'Complete', props: { severity: 'primary' } },
          ],
        },
      ],
    },
  ],
}

import { FormEvent } from '@ng-forge/dynamic-forms';

// Define your custom event
class SaveDraftEvent implements FormEvent {
  readonly type = 'save-draft' as const;
}

const config = {
  fields: [
    { key: 'title', type: 'input', value: '', label: 'Document Title', required: true },
    { key: 'content', type: 'textarea', value: '', label: 'Content' },
    {
      key: 'actions',
      type: 'row',
      fields: [
        {
          type: 'button',
          key: 'saveDraft',
          label: 'Save as Draft',
          event: SaveDraftEvent,
          props: {
            severity: 'secondary',
            icon: 'pi pi-save',
          },
        },
        {
          type: 'submit',
          key: 'publish',
          label: 'Publish',
          props: {
            severity: 'primary',
            icon: 'pi pi-upload',
          },
        },
      ],
    },
  ],
} as const satisfies FormConfig;

import { EventBus } from '@ng-forge/dynamic-forms';

class MyComponent {
  private eventBus = inject(EventBus);

  ngOnInit() {
    this.eventBus.on<SaveDraftEvent>('SaveDraft').subscribe(() => {
      console.log('Save draft clicked', this.form.value);
      // Handle draft saving logic
    });
  }
}

import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';
import Lara from '@primeuix/themes/lara';
import Nora from '@primeuix/themes/nora';

providePrimeNG({
  theme: {
    preset: Aura, // or Lara, Nora, etc.
    options: {
      darkModeSelector: '.dark-mode',
    },
  },
});

{
  type: 'submit',
  key: 'submit',
  label: 'Submit',
  props: {
    severity: 'primary', // 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'help' | 'danger' | 'contrast'
  },
}

{
  key: 'email',
  type: 'input',
  label: 'Email',
  props: {
    size: 'small', // 'small' | 'large' | undefined (default/medium)
  },
}

{
  key: 'email',
  type: 'input',
  label: 'Email',
  props: {
    styleClass: 'my-custom-input',
  },
}