Here is my HTML code:
<script type="text/ng-template" id="my-custom-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<form name="myForm">
<input type="email"
id="email"
name="myEmail"
ng-model="email"
minlength="5"
required />
<!-- any ng-message elements that appear BEFORE the ng-messages-include will
override the messages present in the ng-messages-include template -->
<div ng-messages="myForm.myEmail.$error">
<!-- and here are the generic error messages -->
<div ng-messages-include="error-messages"></div>
</div>
Plunker: http://plnkr.co/edit/AL41PW?p=preview
When I enter a too short string or nothing, I don't get any message as expected.
Could you please tell me what's wrong ?
Regards.
With Angular 1.3.x version ng-messages-include directive should be specified on the same node along with ng-messages
Updated plnkr: http://plnkr.co/edit/9gguHn8RF6qONR5uKQ1w?p=preview
Angular changelog: https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes
Related
Here is the basic way to use ngMessages module. myForm.myName.$error return list of error. I want to get number of errors. I have tried {{myForm.myName.$error | json}}.length and myForm.myName.$error.length.
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
<div ng-message-default>This field has an input error</div>
</div>
</form>
In case you missed it in the documentation for the ngMessages module.
By default, ngMessages will only display one message for a particular key/value collection at any time.
This means myForm.myName.$error can only ever have a maximum of one property.
If you want to support the display of multiple messages, apply the ng-messages-multiple attribute alongside the ng-messages directive. With this applied, you can retrieve the number of active errors by creating a helper function.
function getErrorCount() {
return Object.keys(myForm.myName.$error).length;
}
Here's a demonstration of the suggestion above.
I've been through all of similar/relative topics on ng-maxlength on StackOverflow, but still could not find an answer. My problem is the following snippet of code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
The error message, which should be displayed only if the input is invalid, is constantly shown! Any advise on what it the reason for that and how could I get rid of it would be highly appreciated!
All angularjs applications must have a root element in order to allow angularjs to be able to effective on your view. And that is ng-app directive. This directive is to auto-bootstrap an AngularJS application
You must add it somewhere to the root element
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="form-group field keywords-input-block" ng-app="">
<label>Keywords</label>
<form name="keywords">
<input class="form-control searchKeywordValidator"
type="text"
placeholder="Enter keywords..."
ng-maxlength="5"
name="keywordInput"
ng-model="vm.jobList.keywords">
<h1 ng-if="!keywords.keywordInput.$valid">The value is too long</h1>
</form>
</div>
Read more about it here
this code is not working i want to set min and max value to date is there any possibility to set value only useing html
<html>
<head>
<title>Date test</title>
</head>
<body>
<form>
<div class="list">
<div class="row">
<label class="item item-input">
<input type="date" placeholder="Meeting Date" name="mtgDate" ng-model='lead.meetingDate' ng-readonly="isReadonly" min="02/11/2015" max="01/12/2015">
</label>
</div><br>
<div class="row">
<label ng-show="frm.date.$dirty&&frm.date.$error.min" style="color:red;">below limit</label>
<label ng-show="frm.date.$dirty&&frm.date.$error.max" style="color:red;">Above limit</label>
</div>
</div >
</form>
</body>
</html>
html 5 has a new attribute for input type date
you can specific a field for date only like this
<input type="date" name="date" min="2015-11-02" max="2015-12-31">
Beware that not all browser has implemented this method. If you want cross browser compatibility, it is best to use JavaScript.
Here is a list of browser that supported date type attribute Browser supported list
Here is a working example (at least it worked in Chrome) Date Example
Here is a W3 spec on input type date W3.org
Is that possible to store some additional data along with the error flag itself, using standard Angular mechanism?
i.e. I'm manually setting ngModel.$setValidity, I'd like to pass some data along with the error flag, to be displayed in ngMessages directive.
For example let's assume the min/max length of the field depends upon some external factors, thus is computed & validated server-side. The server respons with customlength error code along with max and min properties, which I'd like to display to the user.
Currently I'm simply setting ngModel.$setValidity("customlength", false); but I'd like to pass {max: response.max, min: response.min} along, to be interpolated in the template like <div ng-message="customlength">the length should be between {{ data.min }} and {{ data.max }}
I'd like to pass {max: response.max, min: response.min} along, to be interpolated in the template like the length should be between {{ data.min }} and {{ data.max }}
Use the root scope to store the value(s) intended to be output within the message string:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.js"></script>
<script>
angular.module('ngMessagesExample',['ngMessages']);
</script>
<body ng-app="ngMessagesExample">
<form name="myForm" id="{{$root.$id}}">
<label>
<p>Enter Min:<input type="text" ng-model="form_min">
<p>Enter Max:<input type="text" ng-model="form_max">
<p>Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="form_min"
ng-maxlength="form_max"
required />
</label>
<p>
<input type="radio" required name="foo" ng-model="foo" value="1">Yes
<input type="radio" required name="foo" ng-model="foo" value="2">No
</p>
<p>
Foo: <input type="text" ng-model="myForm.foo.$modelValue">
</p>
<p>
<input type="submit" value="{{myForm.foo.$error.required ? 'No' : 'Yes'}}">
</p>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.foo.$error" style="color:maroon" role="alert">
<div ng-message="required">Pick one</div>
</div>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">Your value should be between {{form_min}} and {{form_max}} characters long</div>
<div ng-message="minlength" id="{{$id}}">Your value is less than {{form_min}}</div>
<div ng-message="maxlength" id="{{$id}}">Your value is greater than {{form_max}}</div>
</div>
</form>
</body>
References
Easy Form Validation in AngularJS with ngMessages — SitePoint
AngularJS: Developer Guide: Migrating from Previous Versions
Explicitly providing ng-model to DOM elements | TO THE NEW Blog
Using NgModelController with Custom Directives
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