0

I'm using ngx-chips in one of my Angular 8 project. When I was in the "edit" form (ngForm), I see the tag-input has the name of Genre which is selected. However, I'm unable to submit the form as it show me "Field is required". See below my code is .html file:

<tag-input name="itemno" #itemno="ngModel" [ngModel]="genreIds" [onlyFromAutocomplete]="true" required placeholder="" class="form-control none">
    <tag-input-dropdown [autocompleteItems]="itemsAsObjects">
    </tag-input-dropdown>
</tag-input>

<div *ngIf="contentStandalonrFrm.submitted && itemno.invalid">
    <div *ngIf="itemno.errors.required" class="text-danger">{{required_field}}</div>
</div>

In the .ts file:

listArray.forEach(item => {
    this.genreIds.push({ 'value': item.genreId, display : item.genreName });
});

when I console this.genreIds, it shows me the below:

{value: 36, display: "Animation"};

Niladri Banerjee - Uttarpara
  • 2,219
  • 8
  • 52
  • 92

1 Answers1

1

ngx-chips components change detection is not triggered when you push the value using push method.

Angular change detection only checks object identity, not object content. Inserts or removals are therefore not detected

Try this:

const selectedValue =  listArray.map(item => {
   return { 'value': item.genreId, display : item.genreName };
});

this.genreIds = selectedValue;

Ref

Example

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60