Here is my Input field where I am using ng-pattern
<input class="form-control" type="text" name="name"
ng-pattern="/(^[A-z]+$) | (^[0-9]*$)/"
required="" ng-model="name"/>
Input from the user should be either a number or alphabets. How to use OR(|) operator with ng-pattern?
Following are valid inputs :
123 (All numbers)
abc (All alphabets)
Following are invalid inputs :
a1
.tgh7
I think you can just combine your two current regex patterns into a single pattern:
<input class="form-control" type="text" name="name"
ng-pattern="/(^([A-z]+|[0-9]+)$)/"
required="" ng-model="name" />
This approach might outperform what you currently have, because it requires evaluating only a single regex pattern, instead of two patterns.
Follow the link below for a demo of the regex:
Regex101
Related
I am writing an app with AngularJS 1.5. I am trying to write a feature where the user can verify their password in the app and I am using ng-messages to try to validate the form.
My from has 2 fields: password and confirm password.
The 2 validation conditions are: both passwords are required and the passwords must match.
The problem I have is the pattern match fails for a few special characters. It fails for the dollar sign but not all special characters. I need it to work for all characters.
Here is my JSFiddle: http://jsfiddle.net/aubz88/gm0obnqf/69/
A code snippet:
<div>
<label
class="item"
ng-class="{ 'has-error' : vm.verifyPassword.password.$invalid && (vm.verifyPassword.$submitted || vm.verifyPassword.$dirty) }">
<span class="input-label">Password</span>
<input
id="password"
type="password"
name="password"
ng-model="vm.data.password"
placeholder="password"
required>
</label>
</div>
The problem is this line in your JSFiddle, you pass vm.data.password (as a string) to ng-pattern.
ng-pattern="vm.data.password"
According to document of Arguments section of ngPattern https://docs.angularjs.org/api/ng/directive/ngPattern#ngPattern-arguments:
"AngularJS expression that must evaluate to a RegExp or a String parsable into a RegExp, or a RegExp literal."
So AngularJS parses your input into regular expression, that's why some symbols failed, for example $ (dollar sign), as $ is a reserved keyword in regular expression.
I want to use ng-pattern validate my text input field that should accept only Hebrew characters, sometimes the input are ok and sometimes they are being rejected for some reason. (the first one is validate the second letter is not and etc.)
example:
<input type="text" class="form-control" name="firstName" ng-model="Join.firstName" id="firstName" aria-describedby="firstNameHelp" maxlength="15" ng-pattern="onlyHebrewPattern" required>
and the solution that given was:
scope.onlyHebrewPattern = /^[\u05D0-\u05F3]+$/g;
original post
$scope.onlyHebrewPattern = /^[א-ת\s]+$/;
I am using input type number and want to allow user only integer value between 1-10 so added ng-step="1" but it still allow float and giving no error
<input type="number"
ng-step="1"
ng-min="1"
ng-max="10"
name="numKeys"
ng-model="vm.data.numKeys"
ng-required class="form-control" />
see this demo
Use ng-pattern with the RegExp "/^[0-9]+$/" to accept only integer values.
<input type="text" ng-model="value" ng-pattern="/^[0-9]+$/">
this just solve my problem
<input type="text" name="numKeys" ng-pattern="/^([1-9]|10)$/" required />
I have the requirement of having the following conditions in a single-line text field:
The first character should be an upper case letter.
The next two characters should be alphanumeric, but any letter should be in upper case.
Given the following code, how can I validate such conditions?
<input
type="text"
maxlength="3"
ng-model="name"
ng-change="name = name.toUpperCase();"
/>
You can force the correct pattern with the ngPattern attribute.
You can't automatically convert a lower case letter typed by your user to upper case with ngChange, since the model is undefined if the input is invalid, but you can use the $parsers instead.
<input
type="text"
ng-model="name"
ng-pattern="'[A-Z][A-Z0-9]{2}'"
/>
If you're using a version between 1.3.0-beta.12 and 1.3.2, use the pattern ^[A-Z][A-Z0-9]{2}$ instead.
If you're using the version 1.3.0-beta.11 or lower, use the pattern /^[A-Z][A-Z0-9]{2}$/ instead.
you can use ng-pattern to set your regular expression and
<input type="text" ng-model="name"
ng-pattern="'^[A-Z][A-Z\d]{2}'"
ng-change="name = name.toUppercase()" />
here you can test or create your regular expressions https://regex101.com/
I need to apply angular's filter number to input value directly.
I thought the code below must work, but it doesn't..
<input type="text" ng-model="product.price" value="{{product.price | number}}" required>
Is it possible to implement this by default Angular resources? Without writting directives?
This can be achived using regex or ng-pattern.
<input type="text" ng-model="product.price" ng-pattern="/^(\d)+$/" required>
2.If you want to format the data value, you can do something like this.
$scope.product.price= parseInt($scope.product.price)
You don't need to use the value attribute when you have the ng-model attribute:
<input type="text" ng-model="product.price" required>
Set the value of product.price in the controller. If you want to format the price, do it in the controller as well.