Format chip on submit (convert to uppercase the chip)

[gitalvininfo]

PLEASE MAKE SURE THAT:

• you searched similar issues online (9/10 issues in this repo are solved by googling, so please...do it)
• you provide an online demo I can see without having to replicate your environment
• you help me by debugging your issue, and if you can't, do go on filling out this form

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

[ ] bug report => search github for a similar issue or PR before submitting
[ x] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior

The documentation states that onAdding is the solution to this problem. I tried to add this code to tag-input [onAdding]="onAdding($event)" but when I console.log the its value, the event is undefined.

public onAdding(tag: TagModel): Observable<TagModel> { const confirm = window.confirm('Do you really want to add this tag?'); return Observable .of(tag) .filter(() => confirm); }

Expected behavior

I expect when i submit the chip, it will automatically convert to uppercase.

Minimal reproduction of the problem with instructions (if applicable)

What do you use to build your app?. Please specify the version

angular-cli 9.0.7

Angular version:

ngx-chips version:

"ngx-chips": "^2.1.0",

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome

Please tell me if I miss something. Thanks in advance.

[Gbuomprisco]

You don't need to pass the argument cause that's not an output, it is an input

[gitalvininfo]

@Gbuomprisco thanks for clarification. but I have one more question, if my syntax for onAdding is correct because the tag seems to undefined. This is my syntax.

[onAdding]="onAdding(tag)"

In the documentation states that onAdding is an input which will bind to the onAdding(tag: tagModel) function. Am I correct?

Thanks in advance.

[Gbuomprisco]

You need to pass the method, not the result. Just onAdding

[gitalvininfo]

448

[gitalvininfo]

Hi.

I've managed to transform the tag as soon as it is submitted which in my case transform the first string to uppercase. However there's a weird bug which i cannot select any value from the drop down. It just let me click but it does not add.

Here is my view.

<div class="tagInput-container"> <tag-input #plTagInput [ripple]="false" (onRemove)="RemoveTags($event)" [modelAsStrings]="true" [validators]="validators" [errorMessages]="errorMessage" (onAdd)="onTagsAdded($event)" [maxItems]='3' separatorKeyCodes='[{9, 32}]' [secondaryPlaceholder]="'Enter your indicated tags...'" [placeholder]="'Enter your indicated tags...'" [(ngModel)]="InputTags" [identifyBy]="'value'" [displayBy]="'display'" [addOnBlur]="true" [onAdding]="onAdding"> <tag-input-dropdown [appendToBody]="false" [showDropdownIfEmpty]="true" [autocompleteItems]="UserTags" [identifyBy]="'value'" [displayBy]="'display'" [dynamicUpdate]="true" [keepOpen]="false"> </tag-input-dropdown> </tag-input> </div>

and here is my function for transform

public onAdding(value: string): Observable<object> { const item = { display:${value[0].toUpperCase() + value.substr(1).toLowerCase()}, value:${value[0].toUpperCase() + value.substr(1).toLowerCase()}}; return of(item); }

My ngModel for the tags are array of strings. Please let me know if I miss something.

Thanks