I'm trying to incorporate some of the new features of 1.3 into our app. I have a form and couldn't seem to get ng-messages to work. So I put it in a plunker and I still seem to be doing something wrong. My view looks like this:
<form name="profileForm"
ng-submit="profile.submit(profileForm.$valid)"
novalidate>
<input type="text" name="favoriteNumber"
ng-model="profile.number"
required ng-minlength="5" />
<div class="errors" ng-messages="profileForm.favoriteNumber.$error">
<div ng-message="required">this is required</div>
<div ng-message="minlength">this is too short</div>
</div>
<input type="submit" value="Save" />
</form>
I expected to see only one ng-message tag at a time, but both are present when the page loads.
At least I expect the message to go away as their validation criteria are met, but no matter what I type in the input, both messages are always present. It is as if I didn't include the ng-messages script at all.
What am I doing wrong here?
var app = angular.module("demo", ['ngMessages']);
include ngMessages module in you application module as a dependency.
plunker
Related
In my project I have angularjs 1.5.10 and ng-messages 1.5.10. I use it in simple form:
<form class="form-horizontal" ng-submit="createBooking()" role="form" name="createBookingForm" novalidate>
<div class="form-group">
<label for="payment_details_last_name" class="col-sm-3 control-label">Last name</label>
<div class="col-sm-6">
<input type="text"
id="payment_details_last_name"
name="payment_details_last_name"
class="form-control"
ng-model="payment_details.last_name"
ng-required="true"
ng-maxlength="30" />
<div ng-messages="createBookingForm.payment_details_last_name.$error" role="alert">
<div ng-message="required">This field is required</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
</form>
In controller:
$scope.members = [{
'first_name': '',
'last_name': '',
'email': '',
'phone_number': '',
'date_of_birth': '',
}];
And on initial I always see error This field is required. I tried to create empty object in controller:
$scope.createBookingForm = {};
I also show form after initialized <div ng-if="initialized">
Nothing is working. Project using angular-seed skeleton
I saw dirty hacks like if $touched else, but I want to understand what is wrong...
Nothing is wrong about it, check out the sample in the official guide. They have required error shown by default. It seems wrong for the first glance, but this is the only correct way to handle such a case.
So basically, ng-messages does exactly what docs says:
ngMessages is a directive that is designed to show and hide messages
based on the state of a key/value object that it listens on.
the directive works in a real time and shows errors for current input state, that makes sense.
So if you want no messages to be shown by default, you should use some of approaches, discussed hundred of times
How to make ngMessage for required fields only show when dirty or submitting a form?
Angular : ng-message validation on submit click
AngularJS: Hiding ng-message until hitting the form-submit button
AngularJS 1.5.6 reset form & ng-messages
If you need some other improved behavior - there is no quick solution at the moment, you have to come up with your own validation engine that fit your needs.
With Angular 1.5.5 and Angular-Material 1.0.9 I have created a HTML form like this with a repeated input element. I want to use ngMessages for the error messages. The problem I have is that when I enter for example -1, the correct error message is shown in a tooltip, but not below the input element. The issue seems to be that the ng-messages attribute does not support interpolation like the input's name attribute. I could put a variable into the $scope which contains the correct name, but I am not happy with that option because then the input's name is defined in the HTML template and the JavaScript controller. Is there a way to do this more cleanly?
<form name="form">
<md-input-container ng-repeat="product in purchase.products">
<input type="number" min="0" max="9999" ng-model="product.quantity"
name="product[{{$index}}].quantity">
<div ng-messages="form.product[$index].quantity.$error" md-auto-hide="false">
<div ng-message="min">Please enter 0 or more</div>
<div ng-message="max">Please enter 9999 or less</div>
</div>
</md-input-container>
</form>
To be extra clear: In the rendered DOM, there is <input name="product[0].quantity" while ng-messages does not change and $index is not evaluated. I guess I would need an expression that evaluates to "product[0].quantity".
Change your name property to:
<input type="number" min="0" max="9999" required ng-model="product.quantity" name="product_{{$index}}">
And your ngMessages to:
<div ng-messages="form['product_' + $index].$error">
Now it should work.
I just tried introducing ngMessages into my app that's using Components that were added in 1.5. As soon as I include any reference to ngMessage in my template I'm receiving this error message:
Error: $compile:ctreq Missing Required Controller.
This is a common error with ngMessages and the normal remedy is
suggested here:
https://docs.angularjs.org/error/$compile/ctreq?p0=ngMessages&p1=ngMessage
However, I'm using components, which are a special type of directive and this doesn't appear to be an option for components.
Has anyone gotten ngMessages to work within a component in 1.5?
The syntax for use with a directive is like this:
myApp.directive('myDirective', function() {
return {
require: 'ngModel',
...
}
}
The component documentation: https://docs.angularjs.org/guide/component doesn't cover an equivalent to require.
This might help you.
<form name="userLoginForm" autocomplete="off">
<input type="text" minlength="10" maxlength="10" ng-pattern="/^[0-9]+$/" required ng-model="userData.mobileNumber" placeholder="Enter Mobile Number" class="form-control login-form-input" id="mobileNumber" name="mobileNumberInput"/>
<div ng-messages="userLoginForm.mobileNumberInput.$error" role="alert">
<div ng-message="required">
This field is required
</div>
<div ng-message="pattern">
Enter correct mobile number
</div>
<div ng-message="minlength, maxlength">
Your mobile number must 10 characters long</div>
</div>
</div>
It happens when you don't have correct div structure.
First div has to include ng-messages, and one inside should be ng-message.
From Documentation:
<ANY **ng-messages**="expression" role="alert">
<ANY **ng-message**="stringValue">...</ANY>
</ANY>
Angular's debug message is unhelpful in this instance and cause more confusion.
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 am trying to submit the form on only successful validation.
validation is working for required but not working for ng-minlength
form input is invalid but form is still being submitted.
<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
<div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
<label class="control-label" for="mobile">Mobile</label>
<div class="controls">
<input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required />
<span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
<span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value ="submit" />
</div>
count: {{count}}<br />
<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
</div>
</form>
http://jsfiddle.net/pMMke/9/
what am I doing wrong.
I don't want to use submit button disable method.
This is what you are doing wrong: you are mixing two concepts, Angular validators and
HTML5 validators.
The required HTML5 validators, for instance, states that:
When present, it specifies that an input field must be filled out before submitting the form.
So, if you try to submit a form that has an input with this attribute, it will show a message explaining this to the user, and it will prevent the form from being sent. This is the behavior you want. Why isn't working for ng-minlength? Because ng-minlength is an Angular validator (you can tell because it begins with ng-), and it doesn't add any special behavior to the form. It simply set the input where it is located to invalid (and hence, the form), and let you decide what to do with it.
You have an option: you can use the pattern HTML5 validator, to specify the field requires at least 11 characters. It would like this:
<input type="text" pattern=".{11,}">
So when you submit a form containing this input, it will no be sent if the user has enter less than 11 characters.
But since we are it, and you are already using the pattern validator, you could use the regular expression in its full potential, and define something like:
<input type="text" pattern="07[0-9]{9}" />
Which will only admit values of 11 characters, that start by "07" and that contains only digits. I have modified your fiddle to show you how it would work: http://jsfiddle.net/helara/w35SQ/
I mistakenly used ngMaxlength="12" ngMinlength="6" instead of ng-minlength="6" ng-maxlength="12", it's working fine now.
Both ng-minlength & mg-maxlength works in AngularJS.
I've tested this in AngularJS version 1.3.
Make sure to use novalidate with <form> to disable browser's native validation.
This should work:
To enter mobile number
ng-show="myForm.mobile.$touched && myForm.mobile.$error.required"
For minimum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.minlength"
For maximum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.maxlength"
This work for me guys
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input ng-minlength="11" class="mdl-textfield__input" type="text" name="cpf" id="cpf" ng-model="avaliacao.cpf" ng-required="true" ng-pattern="/^\d+$/">
<label class="mdl-textfield__label" for="cpf">CPF *</label>
</div>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.required && myForm.cpf.$dirty">Field Required</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.pattern">Only numbers</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.minlength">Min 11 Chars</p>
I'm facing the same issue, and I think you can only disable the button or ignore the entered value by yourself. You can also check the $valid property in your controller and ignore the value... It is not so nice, but I found no other way.