Sample email: some#mail
In Angular v1.1.x this email is not valid. But in Angular v1.3.x it's valid. I know technically it's valid but I need like some#valid.com email. I tried some regex but not worked.
How can I change validation in Angular v1.3.x ?
Try to use ng-pattern in your email input.
<input type="email" name="input" ng-model="text" ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$/" required>
See an example: plunk
Now this got even better, Angular 4 has email validator built-in, there is no boilerplate code needed :)
https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6
https://github.com/angular/angular/pull/13709
Just add email to the tag. For example
<form #f="ngForm">
<input type="email" ngModel name="email" required email>
<button [disabled]="!f.valid">Submit</button>
<p>Form State: {{f.valid?'VALID':'INVALID'}}</p>
</form>
Related
I'm using the required attribute from HTML5 validations. I don't have an idea why the form still submits even though the html5 validates the empty input field.
Here's the Plunker link. http://plnkr.co/edit/evh0fCD5hdyoXXuxJrUy
<form name="searchUser" ng-submit="search(username)" validation>
<input type="search" placeholder="Username" ng-minlength="1" ng-model="username" required/>
<input type="submit" value="search" ng-click="search(username)" />
</form>
Of course it will submit, the required attribute will only trigger the validation in the field, it wont stop the submit. For this to work you have to do something like this:
if($scope.searchUser.$valid){
$http.get("https://api.github.com/users/" + username)
.then(onUserComplete, onError);
$scope.user = null;
}
Below plnkr:
http://plnkr.co/edit/XznoWH71arlV5RaDLJsd?p=preview
Hope it helps =)
I have inputs in a web page without the form tag (useless to me).
How can I get their validity status inside the HTML ? This
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myInput.$valid">
doesn't work.
I'm afraid that won't work without wrapping it in a form as you need to access those fields via the form's controller.
<form name="myForm">
<input name="myInput" type="text" ng-pattern="/^[0-9]{13}$/">
<input type="button" ng-show="myForm.myInput.$valid">
</form>
Should work.
If you're unable to use the form tag for any reason, you'll have to wire that up manually.
I have a very simplified bit of html like so:
<call-panel>
<form name="hotListForm" >
<twilio>
<input type="text" name="phoneOtherText" id="phoneOtherText" class="form-control" required="required" ng-model="phoneNumber" ng-pattern="validation" ng-trim="false"/>
<span class="error" ng-show="hotListForm.phoneOtherText.$error.pattern">Not a valid phone number</span>
</twilio>
</form>
</call-panel>
But this doesn't work. Is there a special way to do this when in a nested directive. I have verified pattern is available.
Screenshot of it definitely being in the form and of form structure:
It is not working probably because you have the id set to "phoneOtherText" as well, try changing the id and try
The validation is being highlighted correctly, but when I click submit button, even with empty form field, the form is still being submitted (and nick value is undefined)
I tried adding novalidate to the form -- but that didn't help.
<form class="nick" ng-submit="joinChat()">
<input type="text" required name="nick" ng-model="nick" ng-minlength="2" ng-maxlength="10">
<button>Join</button>
</form>
I'm trying to follow this guide here:
http://www.ng-newsletter.com/posts/validations.html
The joinChat() function doesn't do any validation itself. As its my understanding this shouldn't be necessary when using Angular form validation.
$scope.joinChat = function(){
socket.emit('chat:join', { nick: $scope.nick });
};
Invalid input does not prevent angular form submission, instead try this:
<form class="nick" novalidate ng-submit="joinChat()" name="myform">
<input type="text" ng-required="true" name="nick" ng-model="nick" ng-minlength="2" ng-maxlength="10">
<button ng-disabled="myform.$invalid">Join</button>
</form>
Fiddle
I'm using AngularJS and have a form where I want the Submit button to be disabled if some fields are not filled in.
The standard way seems to be the following:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" ng-model="form.name" required>
<input type="submit" ng-disabled="myForm.name.$invalid">
</form>
http://jsfiddle.net/YMSRU/
However, if I omit the model from the input field the validation doesn't work and I don't need any models on my input fields (I submit my form using the ngUpload directive so it's actually sent to the form action in an iframe).
Is there any solution or should I add random models just to make the validation work? It seems like a bad work-around.
You could simply do the invalid check at the form level, then no need to define a model for each input:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" required>
<input type="submit" ng-disabled="myForm.$invalid">
</form>
You are missing your model at your test input tag : ng-model="form.name"