How can I globbaly configure angularjs email validation pattern - angularjs

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>

Related

AngularJS: Are there multiple ways to apply ng-model to a form?

I'm using Scala-Play with the Play-Bootstrap extension and AngularJS. Since the controlling of the application is managed by AngularJS I need the form to be submitted and the response managed by AngularJS and not by the Play controller.
As I understand and using pure AngularJS one can use ng-model to link each input to a specific $scope nested variable e.g.
<form name="userForm">
<label>
Name:
<input type="text" name="userName"
ng-model="user.name"/>
</label><br />
<label>
Other data:
<input type="text" ng-model="user.data" />
</label><br />
</form>
is it possible to accomplish the same by using ng-model on the form tag? instead of applying it to each input? the problem is that it is not possible injecting the needed ng-model to each input while using Play-Bootstrap i.e. this doesn't work:
#b3.text(computeInSampleForm("impliedVolSpread"), '_label -> messagesApi("myapp.impliedVolSpread"),
'_showConstraints -> false, 'ng-model -> "impliedVolSpread")
it fails with error value - is not a member of Symbol it would work if I only knew how to escape the - dash character.
Since I already created a customized version of the b3.form as b3.bgform it would be great if I could do bg-model at the form level ... is that possible?
You can fix this error by explicitly converting to a Symbol:
Symbol("ng-model") -> "impliedVolSpread"
Or by using an implicit conversion import:
#import views.html.helper.Implicits._

How can we make autocomplete=off for password input in angular js?

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

Email Validation with AngularJS 1.2.0

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.

Mail validation angular laravel

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>

bind email containing apostrophes to angular model

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" />

Resources