Home » Coding Tutorials » Angular: How to Drag & Drop with FormArray
Angular: How to Drag & Drop with FormArray
In this tutorial article we’ll learn how we can we drag and drop with FormArray in Angular 11.
Prerequisites:
- Prior knowledge of TypeScript
- Prior knowledge of JavaScript
- Visual studio code
- A development machine with Node 8.9+ & NPM 5.5.1+ installed
How to Drag and Drop with FormArray in Angular: Step by Step Tutorial
Step 1: Installing Angular CLI
First step, where we’ll have to install latest version of Angular CLI
$ npm install -g @angular/cli
Step 2: Creating your Angular 11 Project
In this second step, we will use Angular CLI to start our Angular Project
Go to CMD or Terminal and use this command:
$ ng new sample-demo
This CLI will ask you “whether you would like to add Angular routing” Say Yes.
It will ask “which stylesheet format you would like to use”. Choose CSS.
Now your project is ready Angular CLI will generate required files and folders along with NPM packages and routing too.
Now open your project in Visual studio code and go to your root folder and run the local development server using below command:
$ npm start
Now run localhost:4200/ in your browser
Step 3: Create Interface / Class
export interface ICustomerDocument {
customerName: string;
documents: IDocument[];
}
export interface IDocument {
docName: string;
orderNumber: number;
}
Step 4: Set Model in page
Import Interface into sample.ts
import { ICustomerDocument, IDocument } from '../app.interface';
Declare Model in
model: ICustomerDocument = <ICustomerDocument>{};
Step 5: Set Formgroup / fromarray
Set ReactiveModule / FormModule in AppModule
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
export class SampleComponent implements OnInit {
custDocForm: FormGroup;
docListForm: FormArray;
docList: IDocument[] = [];
isSubmitted: boolean = false;
model: ICustomerDocument = <ICustomerDocument>{};
Set Form in HTML
After set HTML , form will be looks like
Step 6: Initialize form
initializeDocumentDetailForm() {
this.custDocForm = this.formBuilder.group({
customerName: ['', Validators.required],
documents: new FormArray([this.formBuilder.group({
docName: ["Document 1", Validators.required],
orderNumber: [1, Validators.required],
})
]),
});
this.docListForm = this.custDocForm.get('documents') as FormArray;
}
get custForm() { return this.custDocForm.controls; }
get documentForm() { return this.custForm.documents as FormArray; }
-ngOnInit(): void {
- this.initializeDocumentDetailForm();
Step 7: Set Jquery UI in index.ts
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Step 8: set drag n drop method (setDocusmentOrder) in onInit
ngOnInit(): void {
this.initializeDocumentDetailForm();
this.setDocumentOrder();
}
SetDocuementIndex() {
let childDiv = Array.from($("#sortable").children());
let copyDocList = [];
let _docList = this.GetDocumentList();
for (var i = 0; i < childDiv.length; i++) {
let element = childDiv[i];
let _orderId = element["attributes"]["data-id"].value;
let copyDoc = <IDocument>{};
copyDoc = Object.assign({}, _docList.filter(f => f.orderNumber == _orderId)[0]);
copyDoc.orderNumber = i + 1;
copyDocList.push(copyDoc);
}
setTimeout(() => {
this.docList = copyDocList;
let _len = this.documentForm.controls.length;
for (var idx = _len; idx > 0; idx--) {
this.documentForm.removeAt(idx - 1);
}
for (var idx = 0; idx < this.docList.length; idx++) {
let element = this.docList[idx];
this.docListForm.controls.push(
this.formBuilder.group({
docName: [element.docName, Validators.required],
orderNumber: [element.orderNumber, Validators.required],
})
);
}
this.cd.detectChanges();
}, 200);
}
GetDocumentList() {
let _docList = this.custForm.documents.value;
if (_docList == null || _docList == undefined || _docList.length == 0) {
if (this.docList != null && this.docList != undefined && this.docList.length > 0) {
_docList = this.docList;
}
}
else {
this.docList = _docList;
}
return _docList;
}
Output
That’s it. Over To You!
Looking for a Sample Source Code? Here you go: GITHUB.
That’s it for now. Today you have learned how to drag & drop with FormArray in Angular. Happy Coding…
At last, If you’re dealing with large-scale applications or enterprise software, it is beneficial to take experts’ help. If you’re looking for an expert helping hand, contact Samarpan Infotech and hire Angular developers with having minimum of 5+ years of experience working on enterprise software.
Explore more:
I'm working as .NET, Angular Developer at Samarpan Infotech which has a unique combination of quality, value, trust, reliability. I'm always improving my technical skill with the market demand and new technologies.