@flusys/ng-form-builder

Dynamic form builder for FLUSYS — drag-and-drop schema editor (fb-form-builder), runtime form renderer (fb-form-viewer), and result viewer (fb-form-result-viewer).

Installation

npm install @flusys/ng-form-builder @angular/cdk

1. Add Routes

// app.routes.ts
import { FORM_BUILDER_ROUTES } from '@flusys/ng-form-builder';

export const routes: Routes = [
  {
    path: 'forms',
    loadChildren: () => FORM_BUILDER_ROUTES,
  },
];

2. Embed the Builder Component

fb-form-builder provides a three-panel layout: field palette (left), drag-and-drop canvas (center), properties editor (right). FormBuilderStateService is provided at component level automatically — do not add it to root providers.

import { FormBuilderComponent } from '@flusys/ng-form-builder';

@Component({
  imports: [FormBuilderComponent],
  template: `
    <fb-form-builder
      [schema]="schema()"
      (schemaChange)="schema.set($event)"   // emits on every canvas edit
      (schemaSave)="onSave($event)"         // emits when toolbar Save is clicked
      (schemaExport)="onExport($event)"     // emits when toolbar Export is clicked
    />
  `,
})
export class FormEditorPageComponent {
  readonly schema = signal<IFormSchema | null>(null);

  onSave(schema: IFormSchema): void {
    // persist schema to backend
  }
}

Pass null (or omit [schema]) to start with an empty form.

3. Render a Form for Submission

fb-form-viewer renders an IFormSchema for end-user submission. It handles section navigation, progress bar, client-side validation, and conditional field show/hide.

import { FormViewerComponent } from '@flusys/ng-form-builder';

@Component({
  imports: [FormViewerComponent],
  template: `
    <fb-form-viewer
      [schema]="formSchema"
      [initialValues]="draftValues"    // optional — pre-populate fields
      [disabled]="isReadOnly"          // optional — prevents input
      [showHeader]="true"              // optional — shows form name/description
      [isSubmitting]="submitting()"    // optional — shows loading on submit button
      (submitted)="onSubmit($event)"   // emits Record<string, unknown>
      (valueChanged)="onChange($event)"
      (saveDraft)="onDraft($event)"
      (cancelled)="onCancel()"
    />
  `,
})
export class FormViewPageComponent {
  formSchema!: IFormSchema;
  submitting = signal(false);

  onSubmit(values: Record<string, unknown>): void {
    this.submitting.set(true);
    // POST values to backend
  }
}

4. View Collected Results

import { FormResultViewerComponent } from '@flusys/ng-form-builder';

@Component({
  imports: [FormResultViewerComponent],
  template: `
    <fb-form-result-viewer [schema]="schema" [submission]="submission" />
  `,
})
export class ResultPageComponent { }

License

MIT © FLUSYS