How to initialize text or value in tagify when editing a form?

[jmcruzt]

I'm currently working on an Angular project and I have a tagify tag in my component.

These are the settings for my tagify:

It is a mix mode tagify. When I edit an item, I need to put the message text on the tagify input. How can I do that? Can you give me some insights?

Thanks,

[Brakebein]

I have problems to understand what you want to achieve exactly. What do you mean with "edit an item"? Do you mean a specific tag or your component including tagify as a whole? And I am also not sure about "message text on the tagify input": Do you have some kind of placeholder text in mind? Maybe you can fake some image that visualizes what you want to achieve.

[jmcruzt]

Thanks for your reply:

Currently I have the tagify and it is displaying like this:

My issue is when I try to save the text. Using ngModel or FormControlName is not working, I have to get the value using this. this.msgTemplate.tasgify.DOM.input.innerHTML. msgTemplate is a ViewChild. I can't find the text with the tags using double brackets in any of the properties.

The second issue is how to set the value to that tagify control? like I mentioned, ngModel or formControlName is not working for me and if I manually put it on the innerHTML, a lot of errors pop up.

What am I doing wrong? I'd really appreciate your help

[Brakebein]

So, it should basically perform like on the demo app. The example with the mixed tags works without any reference to the inner tagify instance. It just uses ngModel and the updated value is outputted below.

You can have a look at the code of the demo app, maybe you are missing something? https://github.com/Brakebein/ngx-tagify/blob/master/src/app/app.component.html#L58-L63 https://github.com/Brakebein/ngx-tagify/blob/master/src/app/app.component.ts#L30-L40

[jmcruzt]

Can I use formControlName on mix mode tagify controls? I have a reactive form all set up for my dialog component and putting a ngModel would break everything.

Also, the double brackets for the tags, is there something I have to do in order to make that work? I can't find the value with the tags using double brackets

[jmcruzt]

So, I put this text on my tagify control

Here's the setup in the HTML

Here's the tagify settings:

Here's what is being stored on the formControlName

For some reason, the mixed text and tags is nowhere to be found. My project is using Angular 12

[Brakebein]

Ok, I got the problem. I just tested it by myself.

If you declare your FormControl, you need to insert a string and not an array:

mixedForm = new FormGroup({
  mixedTags: new FormControl('')
});

Then the value is also a string:

console.log(this.mixedForm.value.mixedTags);

And updating the value should also work:

this.mixedForm.setValue({
  mixedTags: '[[{"id":200, "value":"cartman", "title":"Eric Cartman"}]] and [[kyle]] do not know [[{"value":"homer simpson", "readonly":true}]] because he\'s a relic.'
});

The implementation of the tagify component is as follows: When the tagify component initializes, it looks for the type of the first incoming value (string or array) and keeps the type. So the output type is the same as the input type. And mixed tags only work with string type. It's also stated in the readme, however not very prominently:

If a string is passed, it gets parsed for tags by Tagify. The returned string is the stringified tags array or, if mode: 'mix', the mixed text and tags string.

---

And while writing the above and playing around, I noticed that there is indeed a bug: After setting the value with setValue() as above, it justs works like I described. But when the form control is empty new FormControl('') and I add text and tags, the value is either empty or an array, just like in your post. Should be a quick fix, I think.

[Brakebein]

I just released a new version. You may check it out.

[jmcruzt]

Hi,

First of all, thank you very much for your help. Highly appreciated.

I think I found out the reason of my issue. If I add text and tag like this:

The output of the formControlName is this:

However, if I add background color using style or transformTag

In this case, here's the output:

As you can see, for some reason if I add styling to the tags, the output tag string loses all the properties. Maybe styling on the mix mode is not supported?

One more issue I found is that when I remove a tag, the formControlName is not being refreshed, I have to type something in the input so it can be updated. If you know a way to trigger the change event manually, that could solve this problem.

Here's an example, I removed the first tag called ClientCode

and, here's the output:

The first ClientCode is the one I deleted, the second ClientCode is the tag with styling. If I type anything on the input, the first ClientCode dissappears.

Again, thanks for your help

[Brakebein]

How does your transformTag method look like?

[jmcruzt]

I'm currently not using it, just adding the style directly to the tag

I implemented transformtag a while ago but the results were the same, the tags loses its configuration.

[Brakebein]

Sorry for my late response. I've been quite busy.

I just tested the mixed text + tags mode together with the transformTag hook and can confirm this behavior. However, this is not a bug with ngx-tagify, but with the core @yaireo/tagify library. I took this example https://codepen.io/vsync/pen/KKzpdxQ and just added

transformTag: (tagData) => {
  tagData.style = '--tag-bg:hsl(90,50%,70%)';
},

to the settings. If you toggle "Show original input", you'll see that the tags are not stringified with their properties as you reported.

The second issue also seems to be a bug of @yaireo/tagify. In the same codepen example, if you remove, for example, the "Cartman" tag, in the output "Cartman" remains without stringified properties until updated otherwise.

So, there are 2 issues you may report to @yaireo/tagify.

[Brakebein]

I cannot reproduce this behavior anymore with the latest @yaireo/tagify version (4.15.2). So, this issue seems to be fixed.