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
Related
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
The above code will fine. But if the ng-app="" directive if moved to form element then it won't work. Any idea why is this. Why the form element will not take ng-app directive and bootstrap the application.
// This will not work
<div>
<form ng-app="">
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
Thanks
Ideally ng-app should be at root level. but in your code, some part is outside the ng-app which angular don't take care of
e.g.the h1 tag
you may write it within the form element or take ng-app to the root level
<div>
<form ng-app="">
First Name: <input type="text" ng-model="firstname">
<h1>You entered: {{firstname}}</h1>
</form>
</div>
It will work, the problem with that the scope of the app. You defined ng-app on <form ng-app=""> so the scope is limited only to the start to end of the tag. Now you placed <h1>You entered: {{firstname}}</h1> outside the boundaries of ng-app so it won't work.
Check the working plnkr - http://plnkr.co/edit/zaTdGCouFrAXJywUSpcl?p=preview
<form ng-app="">
First Name: <input type="text" ng-model="firstname">
<h1>You entered: {{firstname}}</h1>
</form>
From the docs for ng-app:
Use this directive to auto-bootstrap an AngularJS application. The
ngApp directive designates the root element of the application and is
typically placed near the root element of the page - e.g. on the
or tags.
In this code, the ng-app directive is at top level and the angular expression {{firstname}} will take its value from the model.
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
In this code, the angular expression {{firstname}} can't resolve to its model since it lies out of the angular ng-app. Thus it acts simply as plain text.
<div>
<form ng-app="">
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
ng-app is directive which is use to initialize the application
so mostly it is used on <body> tag or main tag of application
Like :-
<body ng-app="myApp"></body>
OR
<div ng-app="myApp">
<form>
// add other elements
</form>
</div>
So this type of directive is not applicable for child elements, even if you apply it will not work because by doing this app will not consider parent element so obviously child element also will not worked
In your case if you are using <form> tag on top level then you can use it like :-
<body>
<form ng-app="myApp">
</form>
</body>
I have the following
<form id="myForm" class="form-inline" >
<div class="container-fluid ">
<input ng-class="{'requiredError':programNameError}" name="first" ng-model="ProgramDetail.ProgramName" placeholder="Name" class="form-control input-xs" type="text" style="width:70%" />
</div>
</form>
This page is being called by the ngRoute when I navigate to a specific route and I specify the controller in the route configuration, buen when I try to access the $scope.myForm i get undefined.
Am I missing something here?
Give the form a name attribute to expose it on the $scope
<form id="myForm" name="myForm" class="form-inline" >
</form>
From the docs:
If the name attribute is specified, the form controller is published
onto the current scope under this name.
Argh, not enough reputation to write a comment, so writing as an answer.. :(
try defining the attribute name for the form.. I have a similar case and it worked only with this..
<form id="myForm" class="form-inline" name="myForm">
</form>
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
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