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}$/;
Related
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'm trying to use the 720Kb datepicker.
https://github.com/720kb/angular-datepicker
While using the simple example :
<datepicker>
<input ng-model="date" type="text"/>
</datepicker>
I'm getting the blow error:
angular.js:11655 Error: [$compile:multidir] Multiple directives
[datepicker, datepicker] asking for new/isolated scope on:
http://errors.angularjs.org/1.3.15/$compile/multidir?p0=datepicker&p1=datep…epicker%20class%3D%22datepicker%22%20date-format%3D%22dd%2FMM%2Fyyyy%22%3E
at angular.js:63
I noticed that if I'm changing the name of the directive in the src file for example to datepickercust the above example will work (with changing the tags).
<datepickercust >
<input ng-model="date" type="text"/>
</datepickercust>
Also , if I'm trying the same example by changing the 'datepicker' tags to 'div' tags , and adding class='datepicker' it works fine.
<div class="datepicker">
<input ng-model="date" type="text"/>
</div>
I just can't understand what's going on here... why the original example not working ?
Thanks in advance.
Check if there are two datepicker directives with the same name and do check what formation they allow like tag, element or attribute etc.
Issue found.
Looks like UI Bootstrap still contain 'datepicker' directive which is deprecated and causing this issue .
Now need to see how I can work with both .
Thanks all.
I have been using Regex pattern validation with AngularJS for the last several versions and it has worked fine.
My application requires that validation patterns are exposed by a scope property, to which the corresponding AngularJS validation directive is bound. Prior to v1.3, it looked something like this:
// On the controller
$scope.validationPattern = "^\\d*$"; // Allow only numeric digits
<!-- in the HTML page --->
<input type="text" name="age" ng-pattern="/{{validationPattern}}/" />
Having now updated AngularJS to v1.4 (bypassing v1.3), I find that the above approach no longer works. Looking at the migration notes for v1.3, I see that this is expected behavior and that a new approach is required, which looks something like this:
// On the controller
$scope.validationRegexp = /^\d*$/; // Use a RegExp instead of a string
<!-- in the HTML page --->
<input type="text" name="age" pattern="{{validationRegexp}}" />
However, I simply can't get this to work. If I place the validation pattern inline (within the HTML input element) it works fine, but when moved onto the scope object and bound to the pattern or ng-pattern directive, no validation occurs.
Here's a JSFiddle that demonstrates the problem.
Any suggestions please?
You should use only the name of the scope variable:
<input type="text" name="age" ng-pattern="validationPattern" />
I use angular and the bootstrap-switch plugin in my application. It works like this:
<input type="checkbox" name="my-checkbox" checked>
<script>$("[name='my-checkbox']").bootstrapSwitch("size", "small");</script>
The problem is that if I want to use all the attributes I found there it doesn't work.
How can I use ng-model with my switch?
I would like to use it like this:
<input type="checkbox" name="my-checkbox" checked="variableStatus" data-on-color="success" data-off-color="warning">
or
<input type="checkbox" name="my-checkbox" ng-model="variableStatus" data-on-color="success" data-off-color="warning">
The most obvious reason that it's not working is that bootstrap-switch is a jQuery library. Angular doesn't play well with jQuery, so if you want to use it, you'll have to write your own directive. However, the following link will give you a directive someone wrote called angular-bootstrap-switch. You might want to check it out.
https://github.com/frapontillo/angular-bootstrap-switch
Bootstrap has special method for starting, if you want start it, try it start after period time in angularjs.
setTimeout(installSwitcher, 1000);
function installSwitcher(){
$("[name='my-checkbox']").bootstrapSwitch();
}
<input type="checkbox" name="my-checkbox" checked>
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.)