angular form builder drag and drop

If you want drag-and-drop form building in Angular, there are a few common approaches depending on whether you want:

1. Drag fields into a form builder UI
2. Reorder form controls
3. Build dynamic forms from a schema

Best Angular option

Use Angular CDK DragDrop. It’s the standard Angular library for drag and drop.

Install

npm install @angular/cdk

Import

import { DragDropModule } from '@angular/cdk/drag-drop';

---

Simple drag-and-drop form builder example

app.component.ts

import { Component } from '@angular/core';
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem
} from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  availableFields = [
    { type: 'text', label: 'Text Input' },
    { type: 'email', label: 'Email Input' },
    { type: 'textarea', label: 'Textarea' },
    { type: 'checkbox', label: 'Checkbox' }
  ];

  formFields: any[] = [];

  drop(event: CdkDragDrop<any[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(this.formFields, event.previousIndex, event.currentIndex);
    } else {
      const field = event.previousContainer.data[event.previousIndex];
      this.formFields.splice(event.currentIndex, 0, { ...field });
    }
  }
}

app.component.html

<div class="builder">
  <div class="palette" cdkDropList [cdkDropListData]="availableFields">
    <h3>Fields</h3>
    <div
      class="field"
      *ngFor="let field of availableFields"
      cdkDrag
    >
      {{ field.label }}
    </div>
  </div>

  <div class="canvas" cdkDropList [cdkDropListData]="formFields" (cdkDropListDropped)="drop($event)">
    <h3>Form Builder</h3>
    <div
      class="field"
      *ngFor="let field of formFields"
      cdkDrag
    >
      {{ field.label }}
    </div>
  </div>
</div>

app.component.css

.builder {
  display: flex;
  gap: 20px;
}

.palette, .canvas {
  width: 300px;
  min-height: 400px;
  padding: 16px;
  border: 1px solid #ccc;
  background: #fafafa;
}

.field {
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #999;
  background: white;
  cursor: move;
}

---

If you want a real dynamic form

You usually keep a JSON config like:

formConfig = [
  { type: 'text', name: 'firstName', label: 'First Name' },
  { type: 'email', name: 'email', label: 'Email' }
];

Then generate Angular Reactive Forms from that config.

---

Popular libraries

If you don’t want to build everything yourself:

• Angular CDK DragDrop — best for custom builder UI
• ngx-formly — great for dynamic forms, less drag-and-drop focused
• @ngx-formly/core + CDK — good combo
• SurveyJS — if you need a full form builder product

---

Recommendation

If your goal is a drag-and-drop form builder, use:

• Angular CDK DragDrop for UI dragging
• Reactive Forms for form generation
• optionally JSON schema to save/load forms

If you want, I can give you:

1. a full Angular drag-and-drop form builder
2. a dynamic reactive form generator
3. a Formly-based solution