javascript - Matautocomplete - 如果键入的值不在列表中，则添加一个新对象

Question

我有一个输入框，用户可以在其中输入任何文本。当用户键入时，会显示一个自动完成面板并突出显示选项。

我想做以下事情：

1. 如果用户键入的内容与任何内容都不完全匹配，则自动完成中的一个选项应显示：“create new...”

2. 选择“创建新...”后，我应该能够保留用户输入的输入值，而不是将其更改为“创建新...”。

对于第 1 点，如果满足条件，我会在过滤器中手动添加“创建新...”，值为 -1。

我不确定如何处理第 2 点。代码片段：

TS：

  onCategorySelectionChanged(event, category?: Category) {
    console.log('first...on category selected');
    console.log(event.source.value);
    console.log(event.source.viewValue);

    if (category.id === -1) {
      console.log('retain the input value here...');
    }
  }

HTML：

<input [matAutocomplete]="autoCategory" 
formControlName="documentCategory"
matInput
type="text"
(blur)="categoryNameOnBlur()"
>
<mat-autocomplete #autoCategory="matAutocomplete" [displayWith]="displayCategoryFn"
autoActiveFirstOption
>
<mat-option *ngFor="let category of filteredCategories | async" [value]="category"
                          (onSelectionChange)="onCategorySelectionChanged($event, category)">{{category.name}}
</mat-option>
</mat-autocomplete>

标签： javascripthtmlangulartypescriptangular8