I'm new with angular forms, i'm trying to validate an email field, and sho a message if the input is invalid.
Ithinked to have do everything correctly, but the error message doesen't show.
<form name="Login" novalidate>
<div class="ama-col-sm-12 pad-top-20-xs form-group">
<label class="copy-title mts-bold pad-bottom-10-xs d-block">E-MAIL</label>
<input type="email" ng-model="Login.userMail" required ng-class="{'invalidClass': Login.userMail.$invalid}">
<div ng-show="Login.userMail.$invalid">
Non va mica bene
</div>
</div>
</form>
Can you tell me if in the markup there is something wrong please?
put name attribute on your email input field and then use the field name while show/hide validation message.
Also make sure your form name and ng-model object shouldn't be the same otherwise it will get wiped off. In this case Login and ng-model's Login were conflicting.
<form name="Login" novalidate>
<div class="ama-col-sm-12 pad-top-20-xs form-group">
<label class="copy-title mts-bold pad-bottom-10-xs d-block">E-MAIL</label>
<input type="email" name="email" ng-model="user.userMail" required
ng-class="{'invalidClass': Login.email.$invalid}">
<div ng-show="Login.email.$invalid">
Non va mica bene
</div>
</div>
</form>
Related
I am trying to call a 'custom validation directive' by watching the ngModel.
My submit function name is dotted.[sllr.save()]
<div class="col-sm-10"><input type="text" placeholder="must be numeric" class="form-control" name="meterCount" ng-model="sllr.entity.MeterCount" is-number>
<div class="m-t-xs" ng-show="sllr.save.meterCount.$invalid && sllr.save.submitted">
<small class="text-danger" ng-show="sllr.save.meterCount.$error.cvalid"></small>
</div>
How should I type this funtion name in ngShow?
I solved. I thought that I should use the value in ng-submit. But actually giving a name to form itself works.
<form method="post" class="form-horizontal" **name="seller_create"** ng-submit="sllr.save()">
I have a form where a model contains an array of sub-models, like this:
<form name="form1">
<div ng-repeat="sub in model.submodels">
<input ng-model="sub.name" required>
<button ng-click="delSubmodel($index)">x</button>
</div>
<button ng-click="addSubmodel()">+</button>
<button ng-disabled="form1.$invalid" type="submit">Save</button>
</form>
How can I make form invalid when there are no input fields (or, in general, when the count of input fields is less than/greater than some value)
Update: Thanks for responses, I hope this can be done outside of controller.
Okay, I just got what you want to achieve, you will had to add a constraint to the form, which is the size of the subModel, so in your submit method:
Before doing anything
$scope.form1.$setValidity('size', model.subModels.length <= 0);
This will set the validity of the form to false in case your condition is false, or viceversa, you can also show a message to notify it to the user, adding this:
<form name="form1">
<div ng-repeat="sub in model.submodels">
<input ng-model="sub.name" required>
<button ng-click="delSubmodel($index)">x</button>
</div>
<input type="hidden" name="size" ng-model="model.subModels.length" />
<button ng-click="addSubmodel()">+</button>
<button ng-disabled="form1.$invalid" type="submit">Save</button>
You can check this example if you don't feel you didn't understood well my point, which is doing the same, just changing the validity for a single input.
Hope it helps you.
I'm using angular-messages to display form validation errors on my angular app.
As per the documentation, I have built the following code
<form name="loginForm">
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="data.email" name="email" required>
</label>
<div ng-messages="loginForm.email.$error" style="color:maroon">
<div ng-message="required">Please input a valid e-mail address</div>
<div ng-message="email">You did not enter your email address correctly...</div>
</div>
</form>
I have included the ngMessages directive in my javascript as well as imported the angular-messages.js file.
Unfortunately, these two messages are showing perpetually. Regardless of what I type in the input field, be it a valid email or not. Both messages are always showing. If I try to only include one ng-message, the result is the same.
What could I be doing wrong?
edit: In case my description isn't very clear, this is a print of the result
https://s9.postimg.cc/du9230tdb/Screen_Shot_2015_06_26_at_17_09_24.png
You gotta make sure you are actually including ngMessage to your module.
var app = angular.module('app', [
'ngMessages'
])
... and that you included the library to your project
<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
Everything seems to be fine in the code you're sharing.
<form name="loginForm">
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="data.email" name="email" required>
</label>
<div ng-messages="loginForm.email.$error" style="color:maroon">
<div ng-message="required">Please input a valid e-mail address</div>
<div ng-message="email">You did not enter your email address correctly...</div>
</div>
</form>
Here is a working copy on Plunker I'm using your piece of code.
From Angularjs documentation.
By default, ngMessages will only display one error at a time. However, if you wish to display all messages then the ng-messages-multiple attribute flag can be used on the element containing the ngMessages directive to make this happen.
If you want to show the errors after the field is dirty, please visit this link.
Make sure you are including ngMessage module and the library as well. Please see Carlos's answer.
Thanks
Check with
<div ng-messages="loginForm.email.$error" ng-show="loginForm.email.$invalid && loginForm.email.$touched">
...
</div>
This trick saved my day.
I have a form that is using a scope var:
function Money() {
this.notional = 0;
}
$scope.money = new Money();
but I am not sure how to display errors for this when it is invalid myForm.money.notional
<form name="myForm">
<input type="text" ng-model="myForm.money.notional" money="money" finance-input size="30" required
placeholder="insert currency value"/>
<div ng-if="myForm.money.notional.$invalid">
There is an error with the field...
</div>
<pre>
Errors = {{ myForm.money.notional.$error }}
</pre>
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)" ng-disabled="myForm.$invalid">SAVE</button>
</form>
Angular's validation infrastructure requires the element names, not the model names.
In your case, you have given a name to the form, but not to the <input>. So, if you change the HTML to:
<form name="myform">
...
<input ... name="notional" />
You can test for validity as:
<div ng-if="myForm.notional.$invalid">...</div>
Having this ordinary (name attribute is requred by server) form with angular and can't figured out how to make validations work. What should i put into ng-show="TODO"
http://jsfiddle.net/Xk3VB/7/
<div ng-app>
<form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
<div ng-repeat="variant in variants" ng-form="variant_form">
<div>
<label>Duration:</label>
<input name="variants[{{$index}}][duration]" ng-model="variant.duration" required />
<span ng-show="TODO">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="variants[{{$index}}][price]" ng-model="variant.price" />
<span ng-show="TODO">Price required</span>
</div>
</div>
</form>
</div>
ps: this is just piece of form, which is more complicated
Thanks
AngularJS relies on input names to expose validation errors.
Unfortunately, as of today it is not possible (without using a custom directive) to dynamically generate a name of an input. Indeed, checking input docs we can see that the name attribute accepts a string only.
Long story short you should rely on ng-form to validate dynamically created inputs. Something like :
<div ng-repeat="variant in variants" >
<ng-form name="innerForm">
<div>
<label>Duration:</label>
<input name="duration" ng-model="variant.duration" required />
<span ng-show="innerForm.duration.$error.required">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="price" ng-model="variant.price" required/>
<span ng-show="innerForm.price.$error.required">Price required</span>
</div>
</ng-form>
Working fiddle here
UPDATE : Base on your serverside requirement why not do something like that :
<input type="hidden" name="variants[{{$index}}][duration]" ng-model="variant.duration"/>
<input name="duration" ng-model="variant.duration" required />
The hidden input will be the one read by the server while the other one will be used to do the client side validation (later discarded by server). It s kind of an hack but should work.
PS : Be sure that your form is valid before actually submitting it. Can be done with ng-submit