Is there any way to know when chip is removed in primeng multiselect?

user_10178261 0
Viewed 998

I am using this one https://primefaces.org/primeng/showcase/#/multiselect with chips My field is connected to a reactive form field and when I select and deselect items from the select with the checkbox it works, however when I remove chips when dropdown is closed the change is not reflected to the dynamic form. I was wondering is there any event that tracks when the chips are removed with the X on them, so I can patch the updated value to the form?

primeng angular
1 Answers

It is a bug, here is removeChip() function:

removeChip(chip: any) {
    this.value = this.value.filter(val => !ObjectUtils.equals(val, chip, this.dataKey));
    this.updateFilledState();
}

where onModelChange() is not called with new value.

As a workaround (before PrimeNG team will fix it) you can call it manually. First get reference to your multi select:

@ViewChild(MultiSelect) ms: MultiSelect;

and then extend removeChip() function within ngAfterViewInit hook:

ngAfterViewInit() {
  const originalRemoveChip = this.ms.removeChip;
  this.ms.removeChip = (...args) => {
    originalRemoveChip.apply(this.ms, args);
    this.ms.onModelChange(this.ms.value);
  };
}

Here is working STACKBLITZ

user_32440640
Related