Angular 8: ngx-chips form validation issue

Question

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"};

Chellappan வ · Accepted Answer · 2020-03-17T05:12:19.407

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

edited Mar 17 '20 at 05:12

answered Mar 17 '20 at 05:02

Chellappan வ

23,645
3
29
60

I've updated my question. can you plz update your answer based on it? – Niladri Banerjee - Uttarpara Mar 17 '20 at 05:03
Can you create stackblitz? – Chellappan வ Mar 17 '20 at 05:04
The `console.log(this.genreIds);` shows the following: `0: {value: 36, display: "Animation"}` – Niladri Banerjee - Uttarpara Mar 17 '20 at 05:07
Working well as you suggested. – Niladri Banerjee - Uttarpara Mar 17 '20 at 05:19

Angular 8: ngx-chips form validation issue

1 Answers1