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
Related
I'm thinking of a good way to implement ng-required.
Let's say I have a bunch of inputs with ng-required in my app.
<input type="text" id="one" />
<input type="date" id="two" />
<input type="radio" id="three" />
<input type="checkbox" id="four" />
I would like to do something in a controller, where I could pass an array of required fields. I'm thinking that if I made an array of elements such as:
var myEl = angular.element( document.querySelector( '#some-id' ) );
and some how set the required property that way.
I write a directive which would decide from an array if the field is required, if it does not exist in the array, it's not required if it does, it's required.
Ultimately, I would like to have an array that allows passing of fields in such a way:
var reqArray = ('#id', ('#id1' || 'id2')) etc.
Works the same as conditional logic operators:
#id is required
#id1 || #id2 is required, but not both.
Not sure where to begin, or if it's feasible in Angular.
This would make it easier to modify required fields in large applications without having to modify the actual html.
It can be done, but angular already provides its own ways to validate forms. Some brief details:
The form tag must have a novalidate attribute in order to prevent HTML5 validation. <form name="myForm" novalidate>
With that, now angular can take charge of the validation by adding a "required" attribute to your inputs <input ng-model="myModel" type="text" required>
By this point, angular has taken control of your validation, it can also validate other HTML5 attributes like pattern. <input pattern="[0-9][A-Z]{3}" type="text" title="Single digit followed by three uppercase letters."/>
I suggest you take look at this official guide (also take a look at the directives guide on that same site, I wanted to link it but I don't yet have the rep).
That being said, what you are trying to accomplish is also possible, but rather redundant since you would have to add an attribute to your inputs anyway (the directive, and angular is able to validate already) and also require ngModel in the directive.
I made this plunkr to show you how to do it, but take notice of the extra work needed in order to validate something that angular already does natively, I'd leave this kind of work for expanding on validations, like comparing items or models.
Also, querying a selector directly like in your suggestion is not considered "the angular way". A better way would be to add the directive to your form element and access the element through the 'element' parameter in the directive.
Hope this helps.
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/
Any one use AngulerJS Validation on TextBox. So that only enter alphabets.
Depending on what you want:
Alphabets and blankspace:
ng-pattern="/^[a-zA-Z\s]*$/"
Alphabets no blankspace:
ng-pattern="/^[a-zA-Z]*$/"
I guess all the other answers using ng-pattern are correct but just to mention, the use of ng-model is compulsory with ng-pattern.
The complete input can be:
<input type="text" ng-pattern ="/^[a-zA-Z\s]*$/" ng-model="Name" />
This will accept the alphabets and the spaces only.
add this to your input
ng-pattern="/^[a-zA-Z]$/"
If you don't want to use ng-pattern for whateever reason, you can also add validating functions to the ng-modal-controller that is set up on your textbox, specifically to the formatters and parsers arrays. A good description of how to do this is here: http://www.benlesh.com/2012/12/angular-js-custom-validation-via.html. Another alternative is to use a published directive to achieve the same purpose, I haven't used this one myself but it seems legit: http://www.brentmckendrick.com/code/xtform/
There is a directive called ng-pattern it allows to use regular expressions to indicate which are the allowed values.
It can be used like this:
<input ng-pattern="/[a-zA-Z]/" ...
I am trying to do validation with angular and Bootstrap but for some reasons ng-pattern validation is not working in Zip Code. Any help will be great in this.
Here's FIDDLE LINK
Not able to paste full code, but here is how I am attempting to use the ng-pattern directive:
<input type="text" class="form-control" id="zipCode" name="zipCode"
ng-model="auth.zip" ng-pattern="^(\d{5}-\d{4}|\d{5})$" required="">
The problem is that when you place the pattern inline instead of a scope variable it expects / around the regex, like a litteral.
Like this:
/^(\d{5}-\d{4}|\d{5})$/
Fiddle
See the input docs, check out the arguments section then ngPattern
Hi you can use like this
$scope.zipNumbr = /^[0-9]{1,6}$/;
I am new with the AngularJs. Can anyone say the difference between ng-model and data-ng-model?
With ng-model
First Name : <input type="text" ng-model="fname" id="fname">
Second Name : <input type="text" ng-model="lname" id="lname">
With data-ng-model
First Name : <input type="text" data-ng-model="fname" id="fname">
Second Name : <input type="text" data-ng-model="lname" id="lname">
while both ng-model and data-ng-model would work, HTML5 expects any custom attribute to be prefixed by data-.
<!-- not HTML5 valid -->
<input type="text" ng-model="name">
<!-- HTML5 valid -->
<input type="text" data-ng-model="name">
They are the same. Angular strips the data- part from the attribute. From the docs:
Angular normalizes an element's tag and attribute name to determine which elements match which directives... The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
There is no difference between ng-model and data-ng-model if you see in terms of AngularJs.
Actually, 'data' used as prefix to validate HTML5 validation. So, it is good practice to use data-ng-model, however, you can use ng-model as well. There is no problem in that also.
Both have the same meaning and both have the same output:
With ng-model
First Name : <input type="text" ng-model="fname" id="fname">
Second Name : <input type="text" ng-model="lname" id="lname">
With data-ng-model
First Name : <input type="text" data-ng-model="fname" id="fname">
Second Name : <input type="text" data-ng-model="lname" id="lname">
Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them.
sylewester's answer is correct and can be read in the AngularJS Directive Documentation found at https://docs.angularjs.org/guide/directive
(this helped me understand sylwester's answer, so i figured it might help others too.)
sylewester's answer is correct and can be read in the AngularJS Directive Documentation found at https://docs.angularjs.org/guide/directive. Below is an excerpt from that page.
AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
For example, the following forms are all equivalent and match the ngBind directive:
(this helped me understand sylwester's answer, so i figured it might help others too.)