How to set initial value using ngx-chips

Question

I have a problem with setting initial value on tag-input. When admin clicks on edit button tag-input must be got some initial value from database. How can i do that ? Here is the example of my code:

<tag-input formControlName="ticketTypes">
  <tag-input-dropdown
    [showDropdownIfEmpty]="true"
    [dynamicUpdate]="false"
    [focusFirstElement]="true"
    [displayBy]="'name'"
    [identifyBy]="'name'"
    [autocompleteItems]="ticketType"
 >
   <ng-template let-item="item" let-index="index">
     {{ item.name }}
   </ng-template>
 </tag-input-dropdown>
</tag-input>

Here is some ts:

setHall() {
    if (this.halls !== undefined) {
      this.loadFirst = false;
      this.halls.forEach(hall => {
        console.log(hall.ticketTypes);
        this.formArray.push(
          this.fb.group({
            name: hall.name,
            availableWindowCount: hall.availableWindowCount,
            totalWindowCount: hall.totalWindowCount,
            ticketTypes: []
          })
        );
      });
    }
  }

Above function is called when the user clicks on edit button it throws some data and set it on form group. But i need to put some values in tag-input. What i exactly want is when user clicks on edit button that some initial value on tag-input. What am i doing wrong ?.

Answer 1

There is an (onFocus)="onInputFocused($event)" event. There you can make a call to your server and fill the form with the retrieved sample data. E.g.

this.service.getTicketTypes().then(tt=>{
    this.form.controls.ticketTypes.setValue(JSON.parse(tt));
})