ng-select предотвращает использование специальных символов на заголовке - PullRequest
Новая
       9

ng-select предотвращает использование специальных символов на заголовке

1 голос
/ 14 февраля 2020

Возможно ли использование библиотеки ng-select для предотвращения обработки специальных символов? Что-то похожее на это решение.

Я пробовал несколько подходов, но, похоже, что значение typeahead не раскрывается и не может быть изменено.

Есть ли обходной путь к этому? Даже стрельба .next() по объекту типа «голова» не меняет того, что показано на виде.

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Под специальными символами я предполагаю, что вы имеете в виду все нечисловые c и не алфавитные c символы. В этом случае вы можете удалить специальные символы, прежде чем они будут использованы для фильтрации, с помощью простого регулярного выражения, например 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 все равно будет предлагать Джонатан Хаммонд . Однако ввод jona!@#$%^ &than hamm*}|"ond (обратите внимание на пробел между ^ и &) ничего не даст.

Пример приложения разветвляется от здесь .

0 голосов
/ 18 февраля 2020

Если я понимаю, что вы хотите заблокировать ввод специальных символов и совсем не хотите их видеть.

Ответ:

Да, вы можете предотвратить обработку специальных символов с помощью обработчика событий нажатие клавиши , как показано ниже.

HTML: 

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

Это то, что вы хотите : (keypress)="blockSpecialChars($event)"

Добавьте в свой Машинопись : 

  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

...