Angular8: ngx-chips 表单验证问题

Question

我在我的 Angular 8 项目之一中使用 ngx-chips。当我在 "edit" 表单 (ngForm) 中时，我看到 tag-input 具有所选的流派名称。但是，我无法提交显示的表格 "Field is required"。看下面我的代码是.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>

在 .ts 文件中：

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

当我控制 this.genreIds 时，它向我显示以下内容：

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

Answer 1

当您使用 push 方法推送值时，不会触发 ngx-chips 组件更改检测。

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

试试这个：

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

this.genreIds = selectedValue;

Example

Angular8: ngx-chips 表单验证问题

Angular 8: ngx-chips form validation issue

angular

ngx-chips