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

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

我想做以下工作：

如果用户键入的内容与任何内容都不完全匹配，则“自动完成”中的选项应显示：“新建…”

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

对于第1点，如果符合条件，我会在过滤器中手动放置一个值为-1的“新建…”

我不知道如何处理第二点。代码段：

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...');
    }
  }

<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>

HTML:

  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...');
    }
  }

<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>

{{category.name}

或者如果有更好的方法从值列表中添加一个新值……我也可以研究一下……你能为此创建一个stackblitz吗？是的，这是可能的，但提供一个stackblitz来检查css是否仍然缺失，但我想应该可以。。