AngularJS ng-pattern with or within textbox - regex

I need to limit an input box to either accept a number or a certain string pattern
<input type="text" ng-model="value" name="value" ng-pattern="/^([0-9])|([R])$/" required>
This does not seem to fully work, i can add 555f and this will be a valid value for my ng-model
How can i limit this to either match a digit or my string pattern?
http://jsfiddle.net/DaleS/dv7vuecz/

You have a problem with your reg exp in ng-pattern, this: /^([0-9])|([R])$/ will mach any string that starts from a number or ends with 'R'. And for what you want, you need smth like this:
/^[0-9]+$|^[R]+$/
It will match any string that is number, or starts and ends with 'R'.

^([0-9]|[R])$
Try this.See demo.
https://regex101.com/r/eZ0yP4/10

Related

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.
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

HTML input pattern fails

I'm sure I miss something, but can't find the reason why this pattern doesn't work... The validator doesn't accept the format of the string I typed (i.e. 06201234567).
<input type="tel" pattern="06\d{7,9}" placeholder="06201234567">
I tried exactly the same code at w3schools' tryit editor, and there were no problem...
In HTML5 you can use <input type='tel'> and <input type='email'>
You can also specify a specific pattern like <input type='tel' pattern='[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}' title='Phone Number (Format: +99(99)9999-9999)'>
Something like pattern='^\+?\d{0,13}' Would give you an optional + and up to 13 digits
The form is in a template where I replaced some texts like {{example}} with other texts and php's preg_replace() search expression {{.*?}} matched {7,9} in the pattern and replaced it.
With the use of ({{.*?}}) everything's OK.

Regex match 3 characters followed by integers

I am new to regex expression and I need a regex in the following pattern:
The string must have a format of “TCK#”. TCK followed by integers.
For example, This is acceptable TCK123. This is not acceptable 123
Here is my current regex expression:
input class="form-control" required="true" type="text" name="TCKInput"
pattern="^[TCK][0-9]$">
With my current code, when the user enter TCK123, it is not acceptable, which is not what I am looking for
Change to below regex:
^(?:TCK)[0-9]+$
Demo: https://regex101.com/r/h9V7n1/1
Changes in the existing Regex you were using:
1) You were using [, ] around TCK which means regex has to match
any one of the values inside this bracket. As you have to match TCK
as it is, change it to (, )
2) You didn't mention + after [0-9] which means exactly one
occurrence will be matched. However, if you will mention +, it will
match one or more occurrence
If you want all 3 letters: TCK and then at least one or more digits after it, then try this:
^TCK\d+$
If you use [TCK] that will only accept one T, one C, or one K
Demo
This Demo sends to a live test server, so a successful submission of data will result in a response from said server
<form id='main' action='https://httpbin.org/post' method='post'>
<input class="form-control" required="true" type="text" name="TCKInput" pattern="^TCK\d+$">
<input type='submit'>
</form>

HTML5 pattern matching

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

Validate <input type="number" /> with AngularJS and Pattern/RegEx

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.