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.

Answer 1

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.

Answer 2

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]+)*$"