Angular Form Input block (space) REGEX

Question

I have an input field in my Angular component in which i want to not allow a user to be able to type a (space).

I've tried using

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

which wasn't what i wanted, and it didn't work anyways!

Does anybody know what the correct regex pattern to just block the (space) key is? And what is the correct way to use the pattern, as the above pattern didn't work...

Thanks in advance.

Use a negative set: `[^ ]` or if you want to disallow every whitespace character: `[^\s]` — ssc-hrep3, Nov 17 '18 at 19:45

score 14 · Accepted Answer · answered Nov 17 '18 at 20:41

14

Using RegEx will still allow the user to type in space. But it will mark the field as invald if a pattern validator is applied to it.

If you don't really want to allow the user to type in space in the first place, you'll have to prevent it by listening to the keydown event on the input and then handling it to prevent its default behaviour. Here, give this a try:

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

Here's also a Sample StackBlitz for your ref.

answered Nov 17 '18 at 20:41

SiddAjmera

38,129
5
72
110

1

Great solution! You can also use the simple `(keydown)` and then call a function that checks which keyboard key was pressed, and handle it according to your needs :) – ntrch Aug 24 '20 at 15:31
1

Simplest solution which actually works! Thanks. – Sheikh Wahab Mahmood Jun 06 '23 at 02:38

Kedar9444 · Answer 2 · 2018-11-17T20:42:50.880

1

The best way of addressing this problem is by writing the directive which you can use on multiple locations.

Here is the Stackblitz sample for the same

edited Nov 17 '18 at 20:42

answered Nov 17 '18 at 20:27

Kedar9444

1,745
1
11
15

It works with e.key === ' ' (one empty space). thanks! – Carnaru Valentin Aug 02 '23 at 07:54

score 1 · Answer 3 · answered Jan 21 '21 at 00:36

1

If you want to allow any type of character except spaces alone without any letters, you can use this: "^\w+( +\w+)*$"

If you also want to use accented vowels, you can use this: "^[a-zA-Zá-úÁ-Ú0-9]+( +[a-zA-Zá-úÁ-Ú0-9]+)*$"

answered Jan 21 '21 at 00:36

Vict01

300
1
10

ssc-hrep3 · Answer 4 · 2018-11-17T19:53:51.447

You can use the following pattern:

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

[^\s] is a negative set which matches every character which is not in the set.
\s matches a white space character (e.g. space, tab, etc.)
* matches 0 or more character of the preceding item

Here is an example of how the browser checks if the pattern is correct (i.e. Google Chrome for example does not allow you to submit the form if there is a whitespace character in it. Test it here (enter a string containing a white space and hit Submit):

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

Angular Form Input block (space) REGEX

4 Answers4

Linked