To implement this functionality with Angular Reactive Form, you can wrap it as shown below:
HTML:
<form [formGroup]="myForm">
<ng-multiselect-dropdown
name="city"
[placeholder]="'Select City'"
[data]="cities"
formControlName="city"
[disabled]="disabled"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)">
</ng-multiselect-dropdown>
</form>
Typescript:
import { FormBuilder, FormGroup } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'multiple-demo',
templateUrl: './multiple-demo.html'
})
export class MultipleDemoComponent implements OnInit {
myForm:FormGroup;
disabled = false;
ShowFilter = false;
limitSelection = false;
cities: Array = [];
selectedItems: Array = [];
dropdownSettings: any = {};
constructor(private fb: FormBuilder) {}
ngOnInit() {
// Initialization of cities and settings
}
onItemSelect(item: any) {
console.log('onItemSelect', item);
}
// Other event handlers and functions
}
For a live demo and more information, check out their official website here.
Hopefully, this solution will meet your requirements.