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/
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.
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
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 just started learning AngularJs So sorry for dump question. I have requirement to validate the field which will start with number and end with 'M' character eg:- 10M, 5M, 200M etc. please any one help me how to do it in angular js.
You can use ng-pattern in your input field e.g.
<input type="text" ng-model="model" id="input" name="input" ng-pattern="regex" />
and in your controller define regex as
$scope.regex = '\\d+M';
And you can check in your html, if input is valid or not like this:
input valid? = <code>{{form.input.$valid}}</code>
This will work well with ng-messages directive for form validation.
Read More.
You can use the ngPattern directive to validate by matching a regular expression:
Angular docs: ngPattern directive
The pattern you need is \d+M (a sequence of 1..n digits, followed by an 'M'), you can try it out on the page I linked.
AngularJS provide a usefull directive ng-pattern that you can apply on an input.
For your problem, you can use this code :
<input type="text" ng-pattern="/^\d+[M]$/" ng-model="model" id="input" />
Explanation
/d means digits only
+ means at least one
[M] means M characters only
I have a situation where I need to escape the following string to be used as the preloaded value for an input field. I would usually use data-bind-html but this doesn't show in the input box.
Here is my string:
"Website Design & Development"
and currently my input field is as follows:
<input class="form-control" type="text" ng-model="group.name" required>
When I use mg-model, it populates the input form value fine, but when I use the following:
<input class="form-control" type="text" ng-bind-html="group.name" required>
Am I doing this correctly or can someone see where I am going wrong? I would ideally like a way to escape the html entities in the controller before it gets shown in the view but I am not sure if this is possible?
Thanks