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