angular form builder drag and drop

When building a visual drag-and-drop form builder in Angular, you essentially have two routes: integrating an out-of-the-box open-source engine that handles layout rendering via JSON schemas, or building a custom builder from scratch using Angular's native CDK.

Option 1: The Top Open-Source Frameworks (Recommended) If you don't want to reinvent the wheel, these ready-made libraries integrate cleanly into Angular architectures and save hundreds of development hours.

1. Form.io (@formio/angular) Form.io is a popular enterprise-grade solution where the core form builder and front-end rendering engines are open source.

How it works: It provides a <formio-builder> component out of the box. As users drag elements, it generates a comprehensive JSON schema that can be saved to any database and re-rendered dynamically elsewhere using their companion <formio> component.

Setup: Requires installing @formio/angular and linking an appropriate CSS framework like Bootstrap.

2. SurveyJS (survey-creator-angular) SurveyJS is a highly customizable, modern front-end library built for rendering responsive forms from JSON schemas.

How it works: It offers a complete SurveyCreatorModel component that automatically outputs raw JSON structures. It features native Angular wrappers, support for conditional branching graphics, and an interactive theme design system panel.

Option 2: Building a Custom Builder Using Angular CDK If your design system requires complete control over the layout, aesthetics, and behavioral actions, you should build the engine yourself using Angular CDK Drag and Drop.

Here is how to set up a clean structure using isolated layout zones (a components toolbox on the left and a building canvas drop zone on the right).

Step 1: Install the Component Development Kit (CDK) Run the following terminal command in your workspace directory:

Bash npm install @angular/cdk Step 2: Configure the Drag-and-Drop HTML Architecture You must bind your component panels together using cdkDropListGroup so items can be shared between the palette lists and the build workspace template.

HTML

<div class="form-builder-wrapper" cdkDropListGroup> <!-- Left Side: Component Toolbox --> <div class="toolbox-panel"> <h3>Form Components</h3> <div cdkDropList [cdkDropListData]="toolboxItems" (cdkDropListDropped)="onDrop($event)"> <div class="draggable-field-card" *ngFor="let item of toolboxItems" cdkDrag> {{ item.label }} </div> </div> </div> <!-- Right Side: Active Workspace Canvas --> <div class="canvas-panel"> <h3>Drop Fields Here</h3> <div cdkDropList [cdkDropListData]="formCanvasItems" (cdkDropListDropped)="onDrop($event)">

  <div class="empty-placeholder" *ngIf="formCanvasItems.length === 0">
    Drag items from the left side panel to start building.
  </div>

  <div 
    class="dropped-field-row" 
    *ngFor="let field of formCanvasItems; let i = index" 
    cdkDrag>
    
    <!-- Render the form inputs contextually -->
    <label>{{ field.label }}</label>
    <ng-container [ngSwitch]="field.type">
      <input *ngSwitchCase="'text'" type="text" [placeholder]="field.placeholder" />
      <textarea *ngSwitchCase="'textarea'"></textarea>
      <input *ngSwitchCase="'checkbox'" type="checkbox" />
    </ng-container>
    
  </div>
</div>

</div> </div> Step 3: Implement the Data State Controller In your TypeScript logic file, utilize the CDK's data transfer utilities (copyArrayItem and moveItemInArray) to manage item locations without accidentally destroying the source toolbox panel list elements.

TypeScript import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DragDropModule, CdkDragDrop, moveItemInArray, copyArrayItem } from '@angular/cdk/drag-drop';

interface FormField { type: string; label: string; placeholder?: string; }

@Component({ selector: 'app-form-builder', standalone: true, imports: [CommonModule, DragDropModule], templateUrl: './form-builder.component.html', styleUrls: ['./form-builder.component.css'] }) export class FormBuilderComponent {

// Available tools in the sidebar palette toolboxItems: FormField[] = [ { type: 'text', label: 'Short Text Input', placeholder: 'Enter text...' }, { type: 'textarea', label: 'Long Paragraph Text' }, { type: 'checkbox', label: 'Single Checkbox Options' } ];

// Current active components on the display canvas formCanvasItems: FormField[] = [];

onDrop(event: CdkDragDrop<FormField[]>) { if (event.previousContainer === event.container) { // Re-ordering fields already dropped inside the canvas moveItemInArray( event.container.data, event.previousIndex, event.currentIndex ); } else { // Cloning a fresh component from the toolbox to the canvas copyArrayItem( event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex );

  // Deep clone the object state so modifications don't break the original toolbox structure
  event.container.data[event.currentIndex] = JSON.parse(
    JSON.stringify(event.container.data[event.currentIndex])
  );
}

} }