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.
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.
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]+)*$"
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>
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
Related
I need to restrict special character in html input box with Angular 7. Similarly I have some other requirement like to enter only number, letter etc.
Am new to Angular, any help will be appreciated.
I tried with some below code:
<input type="text" maxlength="45" class="form-control" id="hno" [(ngModel)]="Address.number" pattern="^[^`~!##$%\^&*()_+={}|[\]\\:';"<>?,./]*$">
Your pattern attribute should look like this:
pattern="[^`~!##$%\^&*()_+={}|[\]\\:';<>?,./\x22]*"
Firstly, you should NOT use ^ and $ because you match every single character with this pattern.
Secondly, there is a problem with the " character. So for now I just removed it from the class, will look more into it.
UPD: Found a solution for a quote character here. \x22 works as " character.
Here is a working example: https://jsfiddle.net/qy5m07uh/
My HTML has the following input element (it is intended to accept email addresses that end in ".com"):
<input type="email" name="p_email_ad" id="p_email_ad" value="" required="required" pattern="[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+)*#([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$" maxlength="64">
At some point in the past 2 months, Chrome has started returning the following JavaScript error (and preventing submission of the parent form) when validating that input:
Pattern attribute value
[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+)*#([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$
is not a valid regular expression: Uncaught SyntaxError: Invalid
regular expression:
/[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+(\.[\-a-zA-Z0-9~!$%\^&*_=+}{\'?]+)*#([a-zA-Z0-9_][\-a-zA-Z0-9_]*(\.[\-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?$/: Invalid escape
Regex101.com likes the regex pattern, but Chrome doesn't. What syntax do I have wrong?
Use
pattern="[-a-zA-Z0-9~!$%^&*_=+}{'?]+(\.[-a-zA-Z0-9~!$%^&*_=+}{'?]+)*#([a-zA-Z0-9_][-a-zA-Z0-9_]*(\.[-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?"
The problem is that some chars that should not be escaped were escaped, like ' and ^ inside the character classes. Note that - inside a character class may be escaped, but does not have to when it is at its start.
Note also that HTML5 engines wraps the whole pattern inside ^(?: and )$ constructs, so there is no need using $ end of string anchor at the end of the pattern.
Test:
<form>
<input type="email" name="p_email_ad" id="p_email_ad" value="" required="required" pattern="[-a-zA-Z0-9~!$%^&*_=+}{'?]+(\.[-a-zA-Z0-9~!$%^&*_=+}{'?]+)*#([a-zA-Z0-9_][-a-zA-Z0-9_]*(\.[-a-zA-Z0-9_]+)*\.([cC][oO][mM]))(:[0-9]{1,5})?" maxlength="64">
<input type="Submit">
</form>
I was experiencing the same issue with my application but had a slightly different approach to a solution. My regex has the same issue that the accepted answer describes (special characters being escaped in character classes when they didn't need to be), however the regex I'm dealing with is coming from an external source so I could not modify it. This kind of regex is usually fine for most languages (passes validation in PHP) but as we have found out it breaks with HTML5.
My simple solution, url encode the regex before applying it to the input's pattern attribute. That seems to satisfy the HTML5 engine and it works as expected. JavaScript's encodeURIComponent is a good fit.
I want to have input element which allows one of two conditions:
Single zero can be entered
Number with max of 9 digits can be entered, but first digit shouldn't be zero
I wrote this regex (solution works in online regex testers):
/(^0$)|(^[1-9]\d{0,8}$)/
But when I use it in ng-pattern in Angular, it doesn't work.
Here is my plunker example:
http://plnkr.co/edit/iDQ7ly8ypJ3UmN5A0hJw?p=preview
Not sure if alternation is doing the problems, or I messed up the regex.
UPDATE: it seems that type="number" is causing problems. Unfortunately, I need to have this in my code, so I'm searching for solution which works with type="number".
This should work for you. I did the following:
Took out the type="number".
Gave the form a name.
Gave the input a name.
Referenced the form and input via their names instead of their id and ng-model values, respectively.
It converts the value to a number under the covers, stripping the leading zeros and converting text to 0, etc.. And the name is the correct way to access it as far as I can tell.
<form name="myForm">
<input name="myNumberField" ng-model="myNumber" ng-pattern="/(^0$)|(^[1-9]\d{0,8}$)/" required/>
<span ng-show="myForm.myNumberField.$error.pattern">Invalid pattern</span>
</form>
Here is a plunker for it.
I am trying to get an angular ng-pattern to check that a username has no whitespaces or special characters. The following form return false if you enter whitespaces or special characters. However, it becomes true as soon as you enter a-z, A-z or 0-9. I have tried ng-pattern="/[^\s]+/" and \S and [^ ] but they make no difference.
<form name="myform">
valid? {{ myform.$valid }}
<input type="text" name="username" ng-model="username" ng-pattern="/[a-zA-Z0-9^ ]/" required/>
</form>
Here's the form in a plunk: http://plnkr.co/edit/6T78kyUgXYfNAwB4RHKQ?p=preview
Try the following pattern:
/^[a-zA-Z0-9]*$/
This allows only alphanumeric characters.
To surface the specific answer I was looking for, I already had the pattern suggested by Sniffer /^[a-zA-Z0-9]*$/, but angular still appeared to ignore leading/trailing whitespace. As Cristian mentions in the comments:
Angular will trim the input model, meaning that the validation doesn't trigger for spaces. You can add an ng-trim="false" to the input to fix this.
Note that Angular is trying to protect you by silently trimming whitespace by default. In my case, I want the user to be aware that the trailing whitespace is invalid.
in case anyone needs to disallow user entering emails in the address field
ng-pattern="/^[^#]+$/"
<div ng-messages="vm.updateCC.mailingAddress.$error" ng-show="vm.updateCC.mailingAddress.$touched">
<p class="validation-message" ng-message="pattern">Please enter a valid address</p>
</div>
I have several form elements that accept hex strings like the one shown below.
<input type="text" name="..." onkeyup="a('...')" pattern=\"[a-fA-F0-9]+\" value=\"****\"/>
I am interested in shorting the pattern attribute value to something shorter, but still accept the same pattern. I am doing this because this html is embedded in a micro controller and saving space is desirable. Is there a predefined cross browser hex matching class?
Only thing shorter is
<input pattern="[a-fA-F\d]+"/>
The \d character class is equivalent to 0-9.
More info: RegExp