Угловая форма Входной блок (пробел) REGEX

Question

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

Я пытался использовать

<input type="text" [(ngModel)]="inputText" pattern="[a-zA-Z]">

это было не то, что я хотел, и все равно это не сработало!

Кто-нибудь знает, каков правильный шаблон регулярного выражения, чтобы просто блокировать (пробел) клавишу? И как правильно использовать шаблон, так как вышеприведенный шаблон не работает ...

Заранее спасибо.

Answer 1

Лучший способ решения этой проблемы - написать директиву, которую вы можете использовать в нескольких местах.

Вот пример Stackblitz для того же самого

Answer 2

Использование RegEx по-прежнему позволяет пользователю вводить пробел.Но оно пометит поле как invald, если к нему будет применен валидатор шаблона.

Если вы не хотите, чтобы пользователь сначала вводил пробел, вам придетсяЧтобы предотвратить это, прослушайте событие keydown на входе, а затем обработайте его, чтобы предотвратить поведение по умолчанию.Вот, попробуйте:

<input type="text" (keydown.space)="$event.preventDefault()">

Вот также Образец StackBlitz для вашей ссылки.

Answer 3

Вы можете использовать следующий шаблон:

<input pattern="[^\s]*">

• [^\s] - это отрицательный набор, который соответствует каждому символу, которого нет в наборе.
• \s соответствует символу пробела (например, пробел, табуляция и т. Д.)
• * соответствует 0 или более символам предыдущего элемента

---

Вот пример того, как браузер проверяет правильность шаблона (например, Google Chrome, например, не позволяет вам отправить форму, если в ней есть символ пробела. Проверьте ее здесь (введите строку, содержащую белый цвет). пробел и нажмите Submit):

<form>
  <input pattern="[^\s]*">
  <button type="submit">Submit</button>
</form>