I'm doing email validation with Angular out of box and works like must be.
<input class="form-control" type="email" placeholder="johndoe#example.com"
name="email" ng-model="user.email" required/>
<div class="error-block" ng-if="form.$submitted && form.email.$invalid">
<div ng-if="form.email.$error.required">Enter the Email Address</div>
<div ng-if="form.email.$error.email">Invalid email address.</div>
The problem is that when the user insert a domain with more than 6 characters, Angular complain about it. For instance if I try to use the email dericlima#company.company, Angular set the email like Invalid.
But if I set the email dericlima#company.compan, Angular validate the email without problems.
Do I have some way to extend the regex to more than 6 characters or I need to use ng-pattern ?
Thanks guys
This behaviour was fixed in angular v1.2.10.
You might either have to update to that version or use ng-patter with regular expression from this commit from angular repository.
Also, I'd advise you to look into this article about email regexp checking.
Related
I am completely new to AngularJs. I need to make autocomplete=off for a password input.
Is autocomplete=off the only way or do we have to do it in some different way in AngularJs?
This doesn't nothing to do with AngularJS at all, but simply html.
Regarding to your statement, password fields shouldn't be autocompleting if they are set to type password, otherwise if you want to set a specific field inside a form to autocomplete off you can do it setting that property to false like this <input autocomplete="on|off">.
This can be defined at form level or at input level. In a form it would be like this:
<form action="" autocomplete="on|off">
</form>
Also you can define it in a form level, and override the behavior for some specific inputs like this:
<form action="" name="myform" autocomplete="on">
<input autocomplete="off" name="myInput" >
</form>
In the above code, in the form myform the autocomplete is on, it means all inputs (the one which allow it) will do autocomplete, but in the input myInput will not, since it overrides the form behavior.
More info can be found in The HTML autocomplete attribute
This should be sufficient:
<input type="password"
autocomplete="off"
placeholder="password"
ng-model="vc.password">
I added the autocomplete="off" just for redundancy but it seems completely unnecessary.
jsbin - https://jsbin.com/bowuxopese/edit?html,js,output
I'm using Ionic to display a list of contacts from a user. So, when the user enters the number and clicks the add button it should display like (011)123-1234 in the list, and this should be followed for each entry. I tried to set the pattern in the tag but couldn't display the phone number. Please help me.
<input type="tel" maxlength="10" ng-model="phone" pattern="/(?:\(?\+\d{2}\)?\s*)?\d+(?:[ -]*\d+)*$/"> <br>
<button ng-click="home()">Home</button></n>
<button ng-click="add()" value="Add">Add</button><br>
You should use ng-pattern instead of pattern.
Checkout the ngPattern documentation for more details.
<input type="tel" maxlength="10" ng-model="phone" ng-pattern="/(?:\(?\+\d{2}\)?\s*)?\d+(?:[ -]*\d+)*$/">
Also, I believe you are looking for a mask directive not a regex.
I suggest this one that works well and it is easy to use.
I have a problem. With angular and laravel I can validate data, the problem is with email field, because laravel and angular use two different reg exp to validate it. I thought to add a custom reg exp in both sides to validate the field in the same. Is there a better solution?
EDIT
Angular validation not give me error when I omit dot
you can use html5 input type email. it has a built in validation. and should be the same format as laravels
https://www.w3.org/TR/html-markup/input.email.html
but normally there should be no difference between laravel and angular email validation. can you maybe give an example where they two differ?
Hope this will help you.
<input type="email" name="email" id="email" class="form-control">
<p ng-show="frmBoard.$submitted || frmBoard.email.$touched" class="has-error">
<span class="help-block" ng-show="frmBoard.email.$error.email">
Not valid email!
</span>
I have an input type email that I validate against my own custom regular expression. It in turn is bound to an angular model something like:
js
$scope.user = {};
html
<input type="email" ng-model="user.email" />
I would like for the email to allow apostrophes but the email doesn't bind to the model unless it passes the built in html5 validation. I'd like to override or switch off this validation since I have my own custom regex in place.
I've tried adding the novalidate tag to the form wrapper and also adding a pattern to the input but not getting anywhere. Please see jsfiddle:
http://jsfiddle.net/HB7LU/19499/
Any ideas greatly appreciated
C
EDIT: The reason I'm not using type="text" is because I want the email keyboard set to be there when accessing from mobile.
Angular do not support the apostrophe(') in email Id , if need to valid the apostrophe in angular, need to change in angular file regular expr
(/^[A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/)
to
/^[A-Za-z0-9._%+'-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/.
It will Work perfectly.
If you already have a regex for validation, you could set the type of the input tag to "text" so that then it would not do any validation and then the regex you have already created could be used to do the validation you want. Also, this will allow you to change the validation method if you ever decide to change how you want validation to work.
Here's the tag:
<input type="text" ng-model="user.email" />
I want to globally change the pattern that angular.js uses to validate email fields.
By default it says that this is valid:
somone#domain
I want to modify it to require the presence of a tld
Does angular expose a global config setting for this?
There are three options available: to change EMAIL_REGEXP variable in angular.js file (this variable doesn't exposed), apply pattern validator or implement custom validator.
The second IMO metter way:
<div ng-form='myForm' >
<input type='email' name='email' ng-model='email' ng-pattern='/tld/i' />
<span ng-show='myForm.email.$error.email' >Invalid email address</span>
<span ng-show='myForm.email.$error.pattern' >Only corporate email addresses accepted</span>
</div>