ng-select 防止提前输入特殊字符

Question

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

我尝试了多种方法，但似乎无论 typeahead 值是什么都没有公开，也无法修改。

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

Answer 1

据我所知，您想阻止输入特殊字符并且根本不想看到它们。

答案：

是的，您可以使用 keypress 事件处理程序来防止处理特殊字符，如下所示。

HTML :

<ng-select name="languages" (keypress)="blockSpecialChars($event)" placeholder="languages" [items]="suggestionsList" [typeahead]="typeahead" [(ngModel)]="currentValue" >

这就是你想要的：(keypress)="blockSpecialChars($event)"

添加到您的 Typescript :

  blockSpecialChars(event) {   
      var k;  
      k = event.charCode;
      return((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57)); 
  }

如果你想允许一些特殊字符并且你不知道那里有什么charCode。在这里查看：KeyCode info

Answer 2

我假设您所说的特殊字符是指所有非数字和非字母字符。在这种情况下，您可以在使用像 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());
    });
  }
}

请注意，仅包含一个空 space 字符（在 0-9 之后）。所以如果超过一个，过滤就会失败，也就没有建议了。

示例：输入 jona!@#$%^&than hamm*}|"ond 仍会提示 Jonathan Hammond。但是，键入 jona!@#$%^ &than hamm*}|"ond（注意 ^ 和 & 之间的 space）不会显示任何内容。

从 here.

派生的示例应用程序

ng-select 防止提前输入特殊字符

ng-select prevent special characters on typeahead

angular-ngselect

angular