Gbuomprisco / ngx-chips

Tag Input component for Angular
MIT License
899 stars 361 forks source link

onTagEdited is not working correctly while sorting after editing #1046

Closed sagar46 closed 1 year ago

sagar46 commented 1 year ago

I am new to Angular and using ngx-chips. After editing the tags I am trying to sort them. Only editing works fine without sorting but when I try to sort them not work properly. here is my code

tags.component.html:-

<tag-input [id]="field.fieldId" [formControlName]="field.fieldName"
[(ngModel)]='field.defaultValue' class="form-control" [displayBy]="'text'" (onTagEdited)="onTextChangeInput($event)" (onAdd)="onItemAdded($event)" (onRemove)="onItemRemoved($event)" [placeholder]="field.otherProperties.placeholder" [editable]="!field.otherProperties.disabled" [identifyBy]="'text'" [secondaryPlaceholder]="field.otherProperties.placeholder"
[disable]="field.otherProperties.disabled">

tags.component.ts:-

onTextChangeInput(value:any) { debugger; this.isModified(); if(this.field.defaultValue[value.index] && this.field.defaultValue[value.index].text){ this.field.defaultValue[value.index].text = value.tag.text; } this.field.defaultValue = this.sortByText(this.field.defaultValue); if(this.field.fieldName == "tradeNameList") {this._exchangeDataService.settradeNameListOptions(this.field.defaultValue)} }

one more thing its works fine on the console of chrome and in the Firefox browser. Can anyone help with this issue?

I think I know the issue but not the solution. In this case, when I edit a tag it calls the onTextChangeInput function and edits the tag on the basis of the index, and then sort all the tags. When data flow from the typeScript file to the HTML file it edits again on the same index that's why it's showing the correct result on the console but not on the UI screen. Can anyone help me with the solution for this issue?