Add onBeforeAdd to chips

[epaitz]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[X] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior The p-chips control will automatically add a string value to the bound array when the Enter key is clicked. If the p-chips control is using an ng-template then its expecting an object with specific properties not a simple string. The developer needs to listen to the onAdd() event, remove the chip that was automatically added by the p-chips control, create the necessary object, and then add the new object to the bound array.

Expected behavior My suggestion would be to include an onAdding() event that would fire before onAdd() and give the developer a chance to take the user entered string and convert it to the necessary object and add it to the bound array so that the new object will be recognized by the ng-template. This would mean that the p-chips control would not automatically add the value. Leave it up to the developer in this case.

Minimal reproduction of the problem with instructions See the following Plunkr fork that tires to demonstrate the bug report. http://plnkr.co/edit/NuI3HN?p=preview

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 4.2.6

• PrimeNG version: 4.1.0

• Browser: [Chrome 54 | Firefox 52 | IE 11]

• Language: [TypeScript X.X | ES5]

[samlii]

Since this was removed without a new milestone, does that mean this has been abandoned?

[davidediak]

this is really needed, imho.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[Salamek]

I don't see anywhere this being implemented,

for now i'm solving this by using this hack that adds object to array and removes all strings from array when new item is added:

onChipAdd(event: any, seatGroup: AbstractControl): void {
    // Handle the addition of a new chip item
    const newItem = event.value.trim(); // Get the new item from the event
    
    if (newItem) {
      // Check if the new item is not empty
      seatGroup.get('seats')?.value.push(<Seat>{
        name: newItem
      }); // Add the new item to the chips array

      // filter out all strings
      const filtered = seatGroup.get('seats')?.value.filter((item: any) => {
        return (typeof item !== 'string');
      });

      seatGroup.get('seats')?.setValue(filtered);
    }
  }