Angular Form Input block (space) REGEX
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.
regex angular
asked Nov 17 '18 at 19:42
Tom O'BrienTom O'Brien
50021646
add a comment |
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.
regex angular
asked Nov 17 '18 at 19:42
Tom O'BrienTom O'Brien
50021646
Use a negative set:[^ ]or if you want to disallow every whitespace character:[^s]
– ssc-hrep3
Nov 17 '18 at 19:45
Did any of these answers fix the issue for you?
– SiddAjmera
Nov 18 '18 at 17:16
add a comment |
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.
regex angular
asked Nov 17 '18 at 19:42
Tom O'BrienTom O'Brien
50021646
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.
regex angular
regex angular
asked Nov 17 '18 at 19:42
Tom O'BrienTom O'Brien
50021646
asked Nov 17 '18 at 19:42
Tom O'BrienTom O'Brien
50021646
asked Nov 17 '18 at 19:42
Tom O'BrienTom O'Brien
50021646
asked Nov 17 '18 at 19:42
Tom O'BrienTom O'Brien
50021646
asked Nov 17 '18 at 19:42
Tom O'BrienTom O'Brien
50021646
50021646
Use a negative set:[^ ]or if you want to disallow every whitespace character:[^s]
– ssc-hrep3
Nov 17 '18 at 19:45
Did any of these answers fix the issue for you?
– SiddAjmera
Nov 18 '18 at 17:16
add a comment |
Use a negative set:[^ ]or if you want to disallow every whitespace character:[^s]
– ssc-hrep3
Nov 17 '18 at 19:45
Did any of these answers fix the issue for you?
– SiddAjmera
Nov 18 '18 at 17:16
Use a negative set:
[^ ] or if you want to disallow every whitespace character: [^s]– ssc-hrep3
Nov 17 '18 at 19:45
Use a negative set:
[^ ] or if you want to disallow every whitespace character: [^s]– ssc-hrep3
Nov 17 '18 at 19:45
Did any of these answers fix the issue for you?
– SiddAjmera
Nov 18 '18 at 17:16
Did any of these answers fix the issue for you?
– SiddAjmera
Nov 18 '18 at 17:16
add a comment |
3 Answers
3
active
oldest
votes
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
SiddAjmeraSiddAjmera
13.5k31137
add a comment |
You can use the following pattern:
<input pattern="[^s]*">
[^s]is a negative set which matches every character which is not in the set.
smatches 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>answered Nov 17 '18 at 19:47
ssc-hrep3ssc-hrep3
5,18131554
add a comment |
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
answered Nov 17 '18 at 20:27
Kedar9444Kedar9444
38328
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53354888%2fangular-form-input-block-space-regex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
SiddAjmeraSiddAjmera
13.5k31137
add a comment |
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
SiddAjmeraSiddAjmera
13.5k31137
add a comment |
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
SiddAjmeraSiddAjmera
13.5k31137
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.
<input type="text" (keydown.space)="$event.preventDefault()"><input type="text" (keydown.space)="$event.preventDefault()">answered Nov 17 '18 at 20:41
SiddAjmeraSiddAjmera
13.5k31137
answered Nov 17 '18 at 20:41
SiddAjmeraSiddAjmera
13.5k31137
answered Nov 17 '18 at 20:41
SiddAjmeraSiddAjmera
13.5k31137
answered Nov 17 '18 at 20:41
SiddAjmeraSiddAjmera
13.5k31137
13.5k31137
add a comment |
add a comment |
You can use the following pattern:
<input pattern="[^s]*">
[^s]is a negative set which matches every character which is not in the set.
smatches 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>answered Nov 17 '18 at 19:47
ssc-hrep3ssc-hrep3
5,18131554
add a comment |
You can use the following pattern:
<input pattern="[^s]*">
[^s]is a negative set which matches every character which is not in the set.
smatches 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>answered Nov 17 '18 at 19:47
ssc-hrep3ssc-hrep3
5,18131554
add a comment |
You can use the following pattern:
<input pattern="[^s]*">
[^s]is a negative set which matches every character which is not in the set.
smatches 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>answered Nov 17 '18 at 19:47
ssc-hrep3ssc-hrep3
5,18131554
You can use the following pattern:
<input pattern="[^s]*">
[^s]is a negative set which matches every character which is not in the set.
smatches 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><form>
<input pattern="[^s]*">
<button type="submit">Submit</button>
</form><form>
<input pattern="[^s]*">
<button type="submit">Submit</button>
</form>answered Nov 17 '18 at 19:47
ssc-hrep3ssc-hrep3
5,18131554
edited Nov 17 '18 at 19:53
answered Nov 17 '18 at 19:47
ssc-hrep3ssc-hrep3
5,18131554
answered Nov 17 '18 at 19:47
ssc-hrep3ssc-hrep3
5,18131554
answered Nov 17 '18 at 19:47
ssc-hrep3ssc-hrep3
5,18131554
5,18131554
add a comment |
add a comment |
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
answered Nov 17 '18 at 20:27
Kedar9444Kedar9444
38328
add a comment |
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
answered Nov 17 '18 at 20:27
Kedar9444Kedar9444
38328
add a comment |
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
answered Nov 17 '18 at 20:27
Kedar9444Kedar9444
38328
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
answered Nov 17 '18 at 20:27
Kedar9444Kedar9444
38328
edited Nov 17 '18 at 20:42
answered Nov 17 '18 at 20:27
Kedar9444Kedar9444
38328
answered Nov 17 '18 at 20:27
Kedar9444Kedar9444
38328
answered Nov 17 '18 at 20:27
Kedar9444Kedar9444
38328
38328
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53354888%2fangular-form-input-block-space-regex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Use a negative set:
[^ ]or if you want to disallow every whitespace character:[^s]– ssc-hrep3
Nov 17 '18 at 19:45
Did any of these answers fix the issue for you?
– SiddAjmera
Nov 18 '18 at 17:16