Ограничение пользователя на ввод специальных символов с помощью Angular

Question

Пользователь может вводить все алфавиты и цифры, но когда вводятся специальные символы, их не следует вводить в текстовое поле.

Я попытался сделать это с помощью (ng-pattern-restrict), но он не работает должным образом, я думаю, что возможно, что его нужно импортировать в app-module.ts но не работает.

HTML FILE

Answer 1

Это может помочь вам, сделав сервис и привязку данных в угловом направлении.

Hello.service.ts

public restrictNumeric(e) {
let input;
if (e.metaKey || e.ctrlKey) {
  return true;
}
if (e.which === 32) {
 return false;
}
if (e.which === 0) {
 return true;
}
if (e.which < 33) {
  return true;
}
input = String.fromCharCode(e.which);
return !!/[\d\s]/.test(input);

}

Hello.html

  <input type="tel" (keypress)="restrictNumeric($event)">

Answer 2

@ Шашанк имеет действительную точку зрения. То, что вы хотите сделать, это отключить ввод специальных символов из бэкэнда, а также сделать поле недействительным из веб-интерфейса. Хакер, зная, что он делает, может легко манипулировать самим HTTP-запросом, а не полем, что делает его довольно уязвимым.

Однако, если вы настаиваете на своем решении, я бы рекомендовал использовать RegEx. Это примерное выражение может пригодиться. Таким образом, всякий раз, когда поле ввода обнаруживает один из этих специальных символов, оно заменяет этот символ на ''