How to create a drag-and-drop form builder in Angular 18?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to create a drag-and-drop form builder in Angular 18?

Guy’s Angular 18 came and if you are new in Angular 18 then please check below links:

1. Angular 18 Tutorials
2. Angular Free Templates

Here is the working code snippet and please follow carefully:

To create a drag-and-drop form builder in Angular 18 using standalone components, follow these steps:

Step 1: Set up Angular Project

First, make sure you have Angular CLI installed. Then create a new Angular project.

ng new drag-drop-form-builder
cd drag-drop-form-builder

Step 2: Install Angular Material and CDK

Angular Material and CDK provide useful components and utilities for building UI elements, including drag-and-drop functionality.

ng add @angular/material

Step 3: Create Standalone Components

Create standalone components for the form builder and form elements.

ng generate component form-builder
ng generate component form-field
ng generate component drop-zone

Step 4: Import Drag and Drop Module

Import the DragDropModule from Angular CDK in your standalone components.

// form-builder.component.ts
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem, DragDropModule  } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { MatToolbarModule } from '@angular/material/toolbar';
import { FormFieldComponent } from '../form-field/form-field.component';
import { DropZoneComponent } from '../drop-zone/drop-zone.component';

@Component({
  standalone: true,
  selector: 'app-form-builder',
  templateUrl: './form-builder.component.html',
  styleUrls: ['./form-builder.component.css'],
  imports: [CommonModule, MatToolbarModule, FormFieldComponent, DropZoneComponent, DragDropModule]
})
export class FormBuilderComponent {
  fields = [
    { type: 'input', label: 'Input' },
    { type: 'select', label: 'Select' },
    { type: 'textarea', label: 'Textarea' }
  ];

  drop(event: CdkDragDrop<any[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(this.fields, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }
}

Step 5: Create Drag-and-Drop Area

Define the drag-and-drop area in your form-builder.component.html.

<!-- form-builder.component.html -->
<mat-toolbar color="primary">
  Drag and Drop Form Builder
</mat-toolbar>
<div class="form-builder" cdkDropList id="formBuilder" [cdkDropListData]="fields" [cdkDropListConnectedTo]="['dropZone']" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let field of fields" cdkDrag [cdkDragData]="field" class="draggable-field">
    <app-form-field [field]="field"></app-form-field>
  </div>
</div>
<app-drop-zone></app-drop-zone>

Step 6: Handle Drag and Drop Events

Implement the logic to handle drag-and-drop events in your form-builder.component.ts.

// drop-zone.component.ts
import { Component } from '@angular/core';
import { CdkDragDrop, transferArrayItem } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { FormFieldComponent } from '../form-field/form-field.component';
import { DragDropModule } from '@angular/cdk/drag-drop';

@Component({
  standalone: true,
  selector: 'app-drop-zone',
  templateUrl: './drop-zone.component.html',
  styleUrls: ['./drop-zone.component.css'],
  imports: [CommonModule, DragDropModule, FormFieldComponent]
})
export class DropZoneComponent {
  droppedFields: any[] = [];

  drop(event: CdkDragDrop<any[]>) {
    if (event.previousContainer !== event.container) {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }
}

<!-- drop-zone.component.html -->
<div class="drop-zone" cdkDropList id="dropZone" [cdkDropListData]="droppedFields" [cdkDropListConnectedTo]="['formBuilder']" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let field of droppedFields" class="dropped-item">
      <app-form-field [field]="field"></app-form-field>
    </div>
  </div>
  

Step 7: Define Form Fields

Define the form fields in form-field.component.ts and form-field.component.html.

// form-field.component.ts
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

@Component({
  standalone: true,
  selector: 'app-form-field',
  templateUrl: './form-field.component.html',
  styleUrls: ['./form-field.component.css'],
  imports: [CommonModule, MatInputModule, MatSelectModule, MatFormFieldModule]
})
export class FormFieldComponent {
  @Input() field: any;
}

<!-- form-field.component.html -->
<div [ngSwitch]="field.type">
  <mat-form-field *ngSwitchCase="'input'" appearance="outline" class="full-width">
    <mat-label>{{ field.label }}</mat-label>
    <input matInput placeholder="{{ field.label }}">
  </mat-form-field>
  <mat-form-field *ngSwitchCase="'select'" appearance="outline" class="full-width">
    <mat-label>{{ field.label }}</mat-label>
    <mat-select>
      <mat-option>{{ field.label }}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field *ngSwitchCase="'textarea'" appearance="outline" class="full-width">
    <mat-label>{{ field.label }}</mat-label>
    <textarea matInput placeholder="{{ field.label }}"></textarea>
  </mat-form-field>
</div>

Step 8: Style Your Components

Add styling to your components in form-builder.component.css and form-field.component.css.

/* form-builder.component.css */
.form-builder {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}

/* form-field.component.css */
.form-builder {
    width: 100%;
    min-height: 500px;
    border: 1px dashed #ccc;
    padding: 20px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .draggable-field {
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    cursor: grab;
  }
  
  .draggable-field:active {
    cursor: grabbing;
  }
  

Step 9: Combine & call all inside app component:

//app.component.ts
import { Component } from '@angular/core';
import { FormBuilderComponent } from './form-builder/form-builder.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { CommonModule } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-root',
  template: '<app-form-builder></app-form-builder>',
  styleUrls: ['./app.component.css'],
  imports: [FormBuilderComponent, MatToolbarModule, CommonModule]
})
export class AppComponent {}

Step 10: Run Your Project

Finally, run your Angular project to see the drag-and-drop form builder in action.

ng serve

This should give you a basic drag-and-drop form builder using standalone components in Angular 18. You can expand on this by adding more features, such as saving the form structure, adding different types of form fields, or customizing the appearance.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch the above video.

I will appreciate that if you will share your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thank you.