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.
Related
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
Is it possible to make some kind of pattern matching with html5 to only allow 3-digit numbers to a text form. I do not want the input type to be number because I dont like the visual design of it.
The closest I get is pattern=".{0.3}" But that accepts all kind of text input - not limited to numbers.
<input type="text" name="price" id="price" pattern="fancy code here">
Question: Can you make a pattern in input type="text" that accepts only integers in the max length of 3?
Use this pattern:
\d{1,3}
and the required attribute
I have a input of type number, and I want to make sure it only accepts a number. I can do this fine on the Server side, but with AngularJS I can not get it to work.
Here's the code:
<input type="number" ng-pattern="/[0-9]+/" name="numOfFruits" ng-model="basket.numOfFruits" />
I suspect this has something to do with the pattern I am supplying [0-9]+ basically I only want numbers in this text box, anything that is not made up of the numbers 0 to 9, I want the input invalid.
At the moment, my input field sees this aa23423 as valid input!
You need to use anchors:
/^[0-9]+$/
^: Start-of-line anchor.
[0-9]+ One or more numbers between 0 and 9.
$: End-of-line anchor.
So this matches the start of the string, then it matches the one or more digits, after that it looks for the end-of-string, so it matches a string containing only numbers and nothing else.
Otherwise, /[0-9]+/ will match only a part of aa23423, more accurately the number 23423 and thus will give you valid.
Here is regexp to validate floating point numbers, both positive and negative:
/^-?[0-9]\d*(\.\d+)?$/
Use this regexp in 'text' input, example:
<input type="text" ng-model="score" ng-pattern="/^-?[0-9]\d*(\.\d+)?$/" required/>
Pattern don't work for input with type="number".
You can use type="text" and than convert value to number
Try defining your regex as a scope variable
In the controller, it worked for me.
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
I need to extract a value from a hidden HTML field, have somewhat figured it out but I'm currently stuck.
My regex looks like:
<input type="hidden" name="form_id" value=".*"
But this extracts the whole string from the HTML.
The string looks like:
<input type="hidden" name="form_id" value="123"/>
I need to extract the "value" from the string, it is always changing, but the "name" is always the same. Is there a way to extract it without doing another expression? I appreciate any help.
(?<=<[^<>]+?name="form_id"[^<>]+value=")(.*)(?=")
I just threw this together. Basically you want to negate any ending > in your request. So you'd likely want to do something of this nature:
<[^>]*hidden[^>]*value="(.*)"[^>]*>
And then read the first capture group (Delphi instructions). This keeps it as reasonably generic as possible although it does assume positional order on "hidden" and "value".
In order to find the value without regard for order you could use could use a slightly cleaner lookahead as was suggested:
^(?=.*name="form_id").*value="([^"]*)".*$
<[a-zA-Z"= _^>]*value="(\d*)"/>
I have tested this for your example.
If you want to extract for only input tag you can write:
<input[a-zA-Z"= _^>]*value="(\d*)"/>