injectAtCaret() not updating Form control value

[Sandhiya-Sivakumar]

Angular version: 13.2.3
ngx-tagify version: 0.7.3
yaireo/tagify version: 4.17.7

I am using mixed tag and adding the tags using injectAtCaret() (from tagify service) when the user clicks a button.

The problem is that if I try to read the value of the respective form control after adding a tag, it is not showing correctly. But if I enter any text somewhere in the input and read the form control value it is getting updated correctly.

Here is a live example.

@Brakebein Is there any way to read the updated value of form control using the tagify component or Can you please provide any workaround to fix this issue? Since we use Angular 13 and cannot upgrade to new ngx-tagify packages since it requires Angular 13+

Thanks!

[Brakebein]

I have fixed this bug already in a later release. I now applied these changes to the Angular 13 version as well. Check out https://www.npmjs.com/package/ngx-tagify/v/0.7.4 and see if it works now.

[Sandhiya-Sivakumar]

I have fixed this bug already in a later release. I now applied these changes to the Angular 13 version as well. Check out https://www.npmjs.com/package/ngx-tagify/v/0.7.4 and see if it works now.

Hai @Brakebein. Thanks much for the quick reply and the new version.

But I am still facing the same issue even after upgrading to v-0.7.4. You can reproduce that here

Can you please help with this?

Thanks in advance!

[Brakebein]

Sorry, I thought it's the same bug with mixed tags value updates as I was facing a few months ago. Thanks for the codesandbox, so I knew which methods you are calling.

The issue was that I was not listening to all change events, basically only to add, remove, and input. However, methods like injectAtCaret only trigger the change event.

With the new release, it should be working now: https://www.npmjs.com/package/ngx-tagify/v/0.7.5

[Sandhiya-Sivakumar]

Thank you so much for your efforts and the quick fix! It works now 😊