时间戳

首页 > 解决方案 > ng-select 防止预先输入的特殊字符

angular - ng-select 防止预先输入的特殊字符

问题描述

使用 ng-select 库，是否可以防止处理特殊字符？类似于此解决方案的东西。

我尝试了多种方法，但似乎任何预先输入的值都没有公开并且无法修改。

有什么解决方法吗？即使在预先输入的主题上触发 a.next()也不会改变视图上显示的内容。

标签： angularangular-ngselect

解决方案

通过特殊字符，我假设您的意思是所有非数字和非字母字符。在这种情况下，您可以在使用简单的正则表达式（如searchTerm = searchTerm.replace(/[^a-zA-Z0-9 ]/g, "");.

一个简单的Stackblitz。

模板：

<h5>Select:</h5>
<ng-select [items]="items$ | async"
  bindLabel="name"
  bindValue="name"
  [closeOnSelect]="true"
  [multiple]="true"
  [hideSelected]="true"
  [typeahead]="input$">
</ng-select>

零件：

export class AppComponent  {
  public items$: Observable<Person[]>;
  public input$ = new Subject<string | null>();

  constructor() {
    this.input$.subscribe((typeahead) => {
      console.log(typeahead);
    });

    this.items$ = this.input$.pipe(
      map((term) => this.searchPeople(term))
    )
  }

  private searchPeople(term: string | null): Person[] {
    let searchTerm = term ? term : '';
    searchTerm = searchTerm.replace(/[^a-zA-Z0-9 ]/g, "");
    return [
      { name: 'Jack Doe' },
      { name: 'Jonathan Hammond' },
      { name: 'Lindsay Johann' },
    ].filter((person) => {
      return person.name.toLowerCase().startsWith(searchTerm.toLowerCase());
    });
  }
}

请注意，仅包含一个空格字符（在 之后0-9）。因此，如果有多个，过滤器将失败并且不会有任何建议。

示例：打字jona!@#$%^&than hamm*}|"ond仍然会建议Jonathan Hammond。但是，键入jona!@#$%^ &than hamm*}|"ond（注意 ^ 和 & 之间的空格）不会提出任何建议。

从这里派生的示例应用程序。

推荐阅读